/* ==========================================================
   1. BASE + RESET
   ========================================================== */
.sefl-chat-window,
.sefl-chat-bubble {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* Force chat window hidden on page load */
.sefl-chat-window {
    display: none !important;
}

/* ==========================================================
   2. CHAT BUBBLE (FAB)
   ========================================================== */
#sefl-chat-bubble {
    position: fixed;
    bottom: 22px;
    right: 22px;
    background: #11274D;
    color: #fff;
    border-radius: 35px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    z-index: 999999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.30);
}

#sefl-chat-bubble .sefl-chat-bubble-icon {
    font-size: 18px;
}

#sefl-chat-bubble .sefl-chat-bubble-text {
    font-size: 15px;
    font-weight: bold;
}

/* ==========================================================
   3. CHAT WINDOW WRAPPER
   ========================================================== */
/* Desktop / default */
#sefl-chat-window {
    position: fixed;
    bottom: 90px;
    right: 22px;
    width: 350px;
    max-width: 94%;
    height: 480px;          /* desktop default */
    max-height: 80vh;       /* safety on tall desktops */
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 999999;
}


/* When opened (JS adds class) */
.sefl-chat-open {
    display: flex !important;
}

/* ==========================================================
   4. CHAT HEADER
   ========================================================== */
.sefl-chat-header {
    background: #11274D;
    color: #fff;
    padding: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* 3-dots menu */
.sefl-chat-menu-wrapper {
    position: relative;
    margin-right: 5px;
}

.sefl-chat-menu-btn {
    background: transparent;
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.sefl-chat-menu-dropdown {
    display: none;
    position: absolute;
    top: 28px;
    right: 0;
    background: #fff;
    color: #000;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    min-width: 160px;
    z-index: 9999999;
}

.sefl-chat-menu-item {
    padding: 10px;
    cursor: pointer;
}

.sefl-chat-menu-item:hover {
    background: #f2f2f2;
}

/* Close (X) button */
.sefl-chat-close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 26px;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
}

/* ==========================================================
   5. CHAT BODY
   ========================================================== */
.sefl-chat-body {
    flex: 1 1 auto;
    min-height: 0;          /* 🔑 allows proper scrolling in flex on mobile */
    padding: 12px;
    overflow-y: auto;
    background: #f9f9f9;
}


/* Scrollbar styling */
.sefl-chat-body::-webkit-scrollbar {
    width: 8px;
}
.sefl-chat-body::-webkit-scrollbar-thumb {
    background: #b5b5b5;
    border-radius: 4px;
}

/* ==========================================================
   6. MESSAGE BUBBLES
   ========================================================== */
.sefl-chat-message {
    padding: 10px 12px;
    margin-bottom: 8px;
    max-width: 90%;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-line;
}

/* BOT MESSAGE */
.sefl-chat-message-bot {
    background: #ffffff;
    color: #333;
    align-self: flex-start;
    border: 1px solid #e2e2e2;
    text-indent: 0;
}

/* USER MESSAGE */
.sefl-chat-message-user {
    background: #11274D;
    color: #fff;
    align-self: flex-end;
}

/* ==========================================================
   7. FOOTER (INPUT + SEND)
   ========================================================== */
.sefl-chat-footer {
    padding: 10px;
    background: #ffffff;
    border-top: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    gap: 8px;
}

#sefl-chat-input {
    flex: 1;
    resize: none;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #d2d2d2;
    font-size: 14px;
    height: 42px;
    line-height: 1.2;
}

#sefl-chat-send {
    padding: 8px 14px;
    background: #11274D;
    color: #ffffff;
    border: none;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
}

#sefl-chat-send:disabled {
    background: #bbbbbb;
    cursor: not-allowed;
}

/* ==========================================================
   8. MOBILE RESPONSIVE
   ========================================================== */
@media (max-width: 480px) {
    #sefl-chat-input {
    font-size: 14px;
    } 
    #sefl-chat-send {
        font-size: 14px;   /* ⬅ key line to stop zoom */
    }
    #sefl-chat-window {
        width: 92%;
        height: 80vh;
        bottom: 80px;
        right: 4%;
        left: 4%;
    }

    #sefl-chat-bubble {
        bottom: 18px;
        right: 18px;
        padding: 10px 16px;
    }

    .sefl-chat-header span {
        font-size: 15px;
    }
}

/* ==========================================================
   1. BASE + RESET
   ========================================================== */
.sefl-chat-window,
.sefl-chat-bubble {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* Force chat window hidden on page load */
.sefl-chat-window {
    display: none !important;
}

/* ==========================================================
   2. CHAT BUBBLE (FAB)
   ========================================================== */
#sefl-chat-bubble {
    position: fixed;
    bottom: 22px;
    right: 22px;
    background: #11274D;
    color: #fff;
    border-radius: 35px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    z-index: 999999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.30);
}

#sefl-chat-bubble .sefl-chat-bubble-icon {
    font-size: 18px;
}

#sefl-chat-bubble .sefl-chat-bubble-text {
    font-size: 15px;
    font-weight: bold;
}

/* ==========================================================
   3. CHAT WINDOW WRAPPER
   ========================================================== */
#sefl-chat-window {
    position: fixed;
    bottom: 90px;
    right: 22px;
    width: 350px;
    max-width: 94%;
    height: 480px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 999999;
}

/* When opened (JS adds class) */
.sefl-chat-open {
    display: flex !important;
}

/* ==========================================================
   4. CHAT HEADER
   ========================================================== */
.sefl-chat-header {
    background: #11274D;
    color: #fff;
    padding: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* 3-dots menu */
.sefl-chat-menu-wrapper {
    position: relative;
    margin-right: 5px;
}

.sefl-chat-menu-btn {
    background: transparent;
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.sefl-chat-menu-dropdown {
    display: none;
    position: absolute;
    top: 28px;
    right: 0;
    background: #fff;
    color: #000;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    min-width: 160px;
    z-index: 9999999;
}

.sefl-chat-menu-item {
    padding: 10px;
    cursor: pointer;
}

.sefl-chat-menu-item:hover {
    background: #f2f2f2;
}

/* Close (X) button */
.sefl-chat-close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 26px;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
}

/* ==========================================================
   5. CHAT BODY
   ========================================================== */
.sefl-chat-body {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    background: #f9f9f9;
}

/* Scrollbar styling */
.sefl-chat-body::-webkit-scrollbar {
    width: 8px;
}
.sefl-chat-body::-webkit-scrollbar-thumb {
    background: #b5b5b5;
    border-radius: 4px;
}

/* ==========================================================
   6. MESSAGE BUBBLES
   ========================================================== */
.sefl-chat-message {
    padding: 10px 12px;
    margin-bottom: 8px;
    max-width: 90%;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-line;
}

/* BOT MESSAGE */
.sefl-chat-message-bot {
    background: #ffffff;
    color: #333;
    align-self: flex-start;
    border: 1px solid #e2e2e2;
    text-indent: 0;
}

/* USER MESSAGE */
.sefl-chat-message-user {
    background: #11274D;
    color: #fff;
    align-self: flex-end;
}

/* ==========================================================
   7. FOOTER (INPUT + SEND)
   ========================================================== */
.sefl-chat-footer {
    padding: 10px;
    background: #ffffff;
    border-top: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    gap: 8px;
}

#sefl-chat-input {
    flex: 1;
    resize: none;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #d2d2d2;
    font-size: 14px;
    height: 42px;
    line-height: 1.2;
}

#sefl-chat-send {
    padding: 8px 14px;
    background: #11274D;
    color: #ffffff;
    border: none;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
}

#sefl-chat-send:disabled {
    background: #bbbbbb;
    cursor: not-allowed;
}

/* ==========================================================
   8. MOBILE RESPONSIVE
   ========================================================== */
@media (max-width: 480px) {
    #sefl-chat-window {
        position: fixed;
        left: 4%;
        right: 4%;
        bottom: 80px;

        width: 92%;
        max-height: calc(100vh - 120px); /* 🔑 fits in viewport */
        height: auto;                    /* let flex children define height */

        border-radius: 10px;
    }
}


/* === FIX: Align input and send button perfectly === */

.sefl-chat-footer {
    padding: 10px;
    background: #ffffff;
    border-top: 1px solid #e6e6e6;
    display: flex;
    align-items: stretch;   /* ⬅ make children same vertical size */
    gap: 8px;
}

/* Textarea input */
#sefl-chat-input {
    flex: 1;
    height: 44px;          /* ⬅ same height as button */
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d2d2d2;
    font-size: 14px;
    box-sizing: border-box;
    resize: none;
    line-height: 1.3;      /* ⬅ normal text, not vertically centered */
}

/* Send button */
#sefl-chat-send {
    height: 44px;          /* ⬅ EXACT same as input */
    padding: 0 16px;       /* vertical comes from height */
    background: #11274D;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    display: flex;         /* ⬅ center text inside */
    align-items: center;
    justify-content: center;
}

#sefl-chat-send:disabled {
    background: #bbbbbb;
    cursor: not-allowed;
}

/* Highlight IDX "view results" links in green */
.sefl-chat-message-bot a {
    color: #0DAA55 !important;        /* Clean green */
    font-weight: bold;
    text-decoration: none;
}

.sefl-chat-message-bot a:hover {
    text-decoration: underline;
    color: #0bc263 !important;        /* Slightly brighter hover green */
}
/* === iOS FINAL FIX: stop zooming when focusing chat input === */
@media (max-width: 480px) {
    /* Force all footer text to 16px so Safari won't zoom */
    .sefl-chat-footer,
    .sefl-chat-footer * {
        font-size: 16px !important;
    }

    /* Keep the heights reasonable */
    #sefl-chat-input {
        height: 44px;
        line-height: 1.3;
    }

    #sefl-chat-send {
        height: 44px;
    }
}

/* Mobile: keep window always inside the screen */
@media (max-width: 768px) {
    #sefl-chat-window {
        position: fixed;
        left: 4%;
        right: 4%;

        /* 🔑 Anchor both top AND bottom so it shrinks with viewport/keyboard */
        top: 10px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);

        width: auto;
        height: auto;                 /* height is now between top & bottom */
        max-height: none;

        border-radius: 10px;
    }
}


.sefl-chat-footer {
    padding: 10px;
    background: #ffffff;
    border-top: 1px solid #e6e6e6;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

#sefl-chat-input {
    flex: 1;
    height: 44px;
    max-height: 44px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d2d2d2;
    font-size: 16px;
    box-sizing: border-box;
    resize: none;
    overflow-y: auto;
    line-height: 1.3;
}

#sefl-chat-send {
    height: 44px;
    padding: 0 16px;
    background: #11274D;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* MOBILE: make chat window full-screen with internal scroll */
@media (max-width: 768px) {
    #sefl-chat-window {
        position: fixed;
        top: env(safe-area-inset-top, 0px);
        left: 0;
        right: 0;
        bottom: env(safe-area-inset-bottom, 0px);

        width: 100%;
        height: auto;
        max-height: 100dvh;      /* use dynamic viewport height on mobile */
        border-radius: 0;        /* edge-to-edge */
        box-shadow: none;        /* optional: remove shadow for full-screen look */

        display: flex;
        flex-direction: column;
        overflow: hidden;        /* body scrolls, not the whole window */
        z-index: 999999;
    }

    /* Ensure header / body / footer behave nicely in full-screen mode */
    .sefl-chat-body {
        flex: 1 1 auto;
        min-height: 0;           /* 🔑 allows proper scrolling in flex on mobile */
        overflow-y: auto;
    }
}


/* Three dots menu */
.sefl-chat-menu-wrapper {
    position: relative;
    display: inline-block;
}

.sefl-chat-menu-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    padding: 4px 6px;
}

.sefl-chat-menu-btn:hover {
    opacity: 0.8;
}

/* Dropdown */
.sefl-chat-menu-dropdown {
    position: absolute;
    top: 28px;
    right: 0;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #ddd;
    min-width: 160px;
    display: none;
    z-index: 999999;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.15);
}

.sefl-chat-menu-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: #fff;
    border: none;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    color: #333;
}

.sefl-chat-menu-item:hover {
    background: #f2f2f2;
}

/* Close menu if clicking elsewhere */
.sefl-chat-menu-dropdown.open {
    display: block;
}

/* Center the column of messages */
.sefl-chat-body {
    text-align: center;        /* center inline-block children */
}

/* Base style for any message bubble */
.sefl-chat-message {
    display: inline-block;     /* so auto margins & text-align center work */
    max-width: 90%;            /* bubble not full width */
    margin: 4px auto;          /* center horizontally */
    text-align: left;          /* text inside bubble stays left */
    clear: both;               /* in case something was floated before */
}

/* === NEW LEFT/RIGHT CHAT BUBBLES (OVERRIDE OLD STYLES) === */

/* Reset any old background styles on the container */
.sefl-chat-message,
.sefl-chat-message-bot,
.sefl-chat-message-user {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/* Each message row */
.sefl-chat-message {
    width: 100%;
    display: flex;
    margin-bottom: 10px;
}

/* Bot messages go to the LEFT */
.sefl-msg-bot {
    justify-content: flex-start;
}

/* User messages go to the RIGHT */
.sefl-msg-user {
    justify-content: flex-end;
}

/* Bubble box */
.sefl-chat-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
}

/* Bot bubble (left, light background) */
.sefl-msg-bot .sefl-chat-bubble {
    background: #f3f3f3 !important;   /* light grey */
    color: #222 !important;
    border-bottom-left-radius: 4px;
}

/* User bubble (right, brand color) */
.sefl-msg-user .sefl-chat-bubble {
    background: #11274D !important;   /* your navy */
    color: #fff !important;
    border-bottom-right-radius: 4px;
}

/* Style ONLY the phrase “Click here to view results” */
.sefl-chat-bubble a[href*="view results"],
.sefl-chat-bubble a:contains("Click here to view results") {
    color: #1BAA3C !important;      /* nice modern green */
    font-weight: bold;
    text-decoration: underline;
}

/* Green links inside bot bubbles (e.g. "Click here to view results") */
.sefl-msg-bot .sefl-chat-bubble a {
    color: #1BAA3C !important;     /* nice green */
    font-weight: 600;
    text-decoration: underline;
}
@media (max-width: 768px) {
    #sefl-ai-chatbot-root,
    .sefl-ai-chatbot-bubble,
    .sefl-ai-chatbot-window {
        display: none !important;
    }
}