/* =========================
   NEXTRIPPY AI CHATBOT
========================= */

/* MAIN CHATBOT */

#travelChatbot{

    position:fixed;

    bottom:18px;
    right:18px;

    width:370px;
    height:560px;

    background:#f4f7fb;

    border-radius:28px;

    overflow:hidden;

    z-index:999999;

    display:none;

    flex-direction:column;

    box-shadow:
    0 18px 50px rgba(0,0,0,0.18);

    font-family:'Poppins',sans-serif;

    animation:chatOpen 0.35s ease;
}

/* OPEN ANIMATION */

@keyframes chatOpen{

    from{
        opacity:0;
        transform:
        translateY(20px)
        scale(0.98);
    }

    to{
        opacity:1;
        transform:
        translateY(0)
        scale(1);
    }
}

/* Mobile open animation — slides up from bottom */
@keyframes chatOpenMobile{
    from{
        opacity:0;
        transform: translateY(100%);
    }
    to{
        opacity:1;
        transform: translateY(0);
    }
}

/* HEADER */

.chatbot-header{

    background:
    linear-gradient(
        135deg,
        #0b5cab 0%,
        #064e89 100%
    );

    color:white;

    padding:16px 18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:78px;
    flex-shrink:0;
}

/* LEFT */

.chatbot-title{

    display:flex;

    align-items:center;

    gap:14px;
}

/* AVATAR */

.chatbot-avatar{

    width:46px;
    height:46px;

    border-radius:50%;

    background:white;

    color:#064e89;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    font-size:1.2rem;

    flex-shrink:0;
}

/* NAME */

.chatbot-name{

    font-size:1.08rem;

    font-weight:600;

    line-height:1.2;
}

/* STATUS */

.chatbot-status{

    font-size:0.78rem;

    opacity:0.88;

    margin-top:2px;
}

/* CLOSE */

.chatbot-close{

    font-size:1.8rem;

    cursor:pointer;

    transition:0.2s ease;
}

.chatbot-close:hover{

    transform:scale(1.08);
}

/* CHAT AREA */

#chatbotMessages{

    flex:1;

    overflow-y:auto;

    padding:18px 16px 24px;

    display:flex;

    flex-direction:column;

    gap:14px;

    scroll-behavior:smooth;
}

/* SCROLLBAR */

#chatbotMessages::-webkit-scrollbar{
    width:5px;
}

#chatbotMessages::-webkit-scrollbar-thumb{
    background:#d1d5db;
    border-radius:20px;
}

/* BOT MESSAGE */

.bot-message{

    background:white;

    color:#111827;

    padding:14px 16px;

    border-radius:
    20px 20px 20px 8px;

    max-width:82%;

    font-size:0.97rem;

    line-height:1.7;

    align-self:flex-start;

    box-shadow:
    0 4px 14px rgba(0,0,0,0.05);
}

/* USER MESSAGE */

.user-message{

    background:
    linear-gradient(
        135deg,
        #0b5cab 0%,
        #317cbd 100%
    );

    color:white;

    padding:14px 16px;

    border-radius:
    20px 20px 8px 20px;

    max-width:78%;

    font-size:0.96rem;

    line-height:1.6;

    align-self:flex-end;

    box-shadow:
    0 6px 18px rgba(11,92,171,0.18);
}

/* SAY HI */

.sayhi-wrapper{

    display:flex;

    justify-content:flex-end;

    margin-top:2px;
}

.sayhi-btn{

    background:
    linear-gradient(
        135deg,
        #0b5cab 0%,
        #317cbd 100%
    );

    color:white;

    border:none;

    padding:13px 20px;

    border-radius:20px;

    cursor:pointer;

    font-size:0.92rem;

    font-weight:600;

    transition:0.25s ease;

    box-shadow:
    0 10px 20px rgba(11,92,171,0.18);
}

.sayhi-btn:hover{

    transform:translateY(-2px);
}

/* WHATSAPP BUTTON IN CHAT */

.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25D366;
    color: white !important;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: 0.25s ease;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.3);
}

.whatsapp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.4);
}

/* INPUT AREA */

.chatbot-input-area{
    background:#ffffff;
    padding:14px 16px;
    display:none;
    gap:12px;
    align-items:center;
    border-top:1px solid rgba(0,0,0,0.05);
    flex-shrink:0;
    width:100%;
    box-sizing:border-box;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.02);
}

/* INPUT */

#chatInput{
    flex:1;
    min-width:0;
    height:50px;
    border:1px solid #e2e8f0;
    border-radius:25px;
    padding:0 20px;
    outline:none;
    font-size:0.95rem;
    background:#f8fafc;
    transition:0.3s ease;
    color:#0f172a;
    font-family:'Poppins',sans-serif;
}

#chatInput:focus{
    background:#ffffff;
    border-color:#0b5cab;
    box-shadow:0 0 0 3px rgba(11,92,171,0.1);
}

/* SEND BUTTON */

.send-btn{
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:linear-gradient(135deg, #0b5cab 0%, #317cbd 100%);
    color:white;
    cursor:pointer;
    font-size:1.1rem;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
    transition:0.25s ease;
    box-shadow:0 6px 16px rgba(11,92,171,0.2);
}

.send-btn:hover{
    transform:scale(1.05);
    box-shadow:0 8px 20px rgba(11,92,171,0.25);
}

/* LAUNCHER */

.chat-launcher{

    position:fixed;

    bottom:18px;
    right:18px;

    width:62px;
    height:62px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #0b5cab 0%,
        #317cbd 100%
    );

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.5rem;

    cursor:pointer;

    z-index:999999;

    box-shadow:
    0 12px 30px rgba(0,0,0,0.18);

    transition:0.3s ease;
}

.chat-launcher:hover{

    transform:scale(1.08);
}

/* TYPING */

.typing-indicator{

    display:flex;

    align-items:center;

    gap:5px;

    min-height:22px;
}

.typing-indicator .dot{

    width:6px;
    height:6px;

    background:#94a3b8;

    border-radius:50%;

    animation:typing 1.3s infinite;
}

.typing-indicator .dot:nth-child(2){
    animation-delay:0.2s;
}

.typing-indicator .dot:nth-child(3){
    animation-delay:0.4s;
}

@keyframes typing{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-4px);
    }
}

/* =============================================
   MOBILE — BOTTOM SHEET POPUP (not full screen)
============================================= */

/* Dim backdrop behind chatbot on mobile */
#chatbotBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 999998;
    backdrop-filter: blur(2px);
}

#chatbotBackdrop.visible {
    display: block;
}

@media screen and (max-width:768px){

    /* Bottom sheet: fixed height, side margins, rounded top */
    #travelChatbot{

        width: calc(100% - 28px);
        max-width: 460px;

        height: 82dvh;
        max-height: 600px;

        left: 50%;
        right: auto;
        bottom: 14px;
        transform: translateX(-50%);

        border-radius: 28px;

        animation: chatOpenMobile 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .chatbot-header{

        padding:14px 16px;

        min-height:72px;
    }

    .chatbot-avatar{

        width:42px;
        height:42px;
    }

    .chatbot-name{

        font-size:1rem;
    }

    .chatbot-status{

        font-size:0.75rem;
    }

    #chatbotMessages{

        padding:
        16px 14px 20px;

        gap:13px;
    }

    .bot-message,
    .user-message{

        max-width:84%;

        font-size:0.93rem;

        line-height:1.65;

        padding:12px 14px;
    }

    .chatbot-input-area{

        padding:
        10px
        12px
        calc(10px + env(safe-area-inset-bottom));
    }

    #chatInput{

        height:48px;

        font-size:0.92rem;
    }

    .send-btn{

        width:48px;
        height:48px;
    }

    .chat-launcher{

        width:58px;
        height:58px;

        right:16px;
        bottom:16px;
    }

}