/* =========================================
   HBI CHATBOT WIDGET — STYLES
========================================= */

#hbiChatWidget *{
    box-sizing:border-box;
    font-family:'Inter','Segoe UI',sans-serif;
}

#hbiChatWidget{
    position:fixed;
    bottom:24px;
    right:24px;
    z-index:99999;
}

/* =========================================
   LAUNCHER
========================================= */

#hbiChatLauncher{
    width:62px;
    height:62px;
    border-radius:50%;
    background:#710014;
    border:none;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 14px 35px rgba(113,0,20,.35);
    transition:.3s ease;
    position:relative;
}

#hbiChatLauncher:hover{
    transform:translateY(-4px) scale(1.04);
    background:#8f021d;
}

#hbiChatIconClose{
    display:none;
    position:absolute;
}

#hbiChatLauncher.open #hbiChatIconOpen{
    display:none;
}

#hbiChatLauncher.open #hbiChatIconClose{
    display:block;
}

.hbi-chat-ping{
    position:absolute;
    top:-4px;
    right:-4px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#22c55e;
    border:2px solid #fff;
}

.hbi-chat-ping::before{
    content:'';
    position:absolute;
    inset:-4px;
    border-radius:50%;
    background:rgba(34,197,94,.4);
    animation:hbiPing 1.6s ease-out infinite;
}

@keyframes hbiPing{
    0%{ transform:scale(.8); opacity:1; }
    100%{ transform:scale(2.2); opacity:0; }
}

/* =========================================
   CHAT WINDOW
========================================= */

#hbiChatWindow{
    position:absolute;
    bottom:78px;
    right:0;
    width:380px;
    max-height:600px;
    background:#fff;
    border-radius:24px;
    box-shadow:0 30px 80px rgba(0,0,0,.22);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px) scale(.96);
    transition:.3s cubic-bezier(.16,1,.3,1);
}

#hbiChatWindow.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

/* =========================================
   HEADER
========================================= */

.hbi-chat-header{
    background:linear-gradient(120deg,#710014,#4a000d);
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-shrink:0;
}

.hbi-chat-header-info{
    display:flex;
    align-items:center;
    gap:12px;
}

.hbi-chat-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:16px;
    flex-shrink:0;
}

.hbi-chat-header-info strong{
    display:block;
    color:#fff;
    font-size:14px;
    font-weight:700;
    margin-bottom:2px;
}

.hbi-chat-header-info span{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:11.5px;
    color:rgba(255,255,255,.75);
}

.hbi-online-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#22c55e;
    display:inline-block;
}

#hbiChatMinimize{
    background:rgba(255,255,255,.12);
    border:none;
    color:#fff;
    width:30px;
    height:30px;
    border-radius:50%;
    cursor:pointer;
    transition:.2s ease;
    flex-shrink:0;
}

#hbiChatMinimize:hover{
    background:rgba(255,255,255,.22);
}

/* =========================================
   BODY / MESSAGES
========================================= */

.hbi-chat-body{
    flex:1;
    overflow-y:auto;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:14px;
    background:#fbf9f7;
    max-height:420px;
}

.hbi-msg{
    display:flex;
    max-width:90%;
}

.hbi-msg.bot{
    align-self:flex-start;
}

.hbi-msg.user{
    align-self:flex-end;
}

.hbi-msg-bubble{
    padding:12px 16px;
    border-radius:16px;
    font-size:13.5px;
    line-height:1.6;
}

.hbi-msg.bot .hbi-msg-bubble{
    background:#fff;
    color:#333;
    border:1px solid #ececec;
    border-bottom-left-radius:4px;
}

.hbi-msg.user .hbi-msg-bubble{
    background:#710014;
    color:#fff;
    border-bottom-right-radius:4px;
}

/* LINKS UNDER BOT MESSAGE */

.hbi-msg-links{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:8px;
}

.hbi-msg-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#fff;
    border:1px solid #e9c8c8;
    color:#710014;
    text-decoration:none;
    padding:10px 14px;
    border-radius:12px;
    font-size:12.5px;
    font-weight:700;
    transition:.2s ease;
}

.hbi-msg-link:hover{
    background:#710014;
    color:#fff;
    border-color:#710014;
}

.hbi-msg-link i{
    font-size:10px;
}

/* =========================================
   QUICK REPLY CHIPS
========================================= */

.hbi-quick-replies{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:4px;
}

.hbi-chip{
    background:#fff;
    border:1.5px solid #ecd9d9;
    color:#710014;
    padding:9px 14px;
    border-radius:30px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    transition:.2s ease;
}

.hbi-chip:hover{
    background:#710014;
    color:#fff;
    border-color:#710014;
}

/* =========================================
   TYPING INDICATOR
========================================= */

.hbi-typing-bubble{
    display:flex;
    gap:4px;
    padding:14px 16px;
}

.hbi-typing-bubble span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#bbb;
    animation:hbiTypingDot 1.2s infinite ease-in-out;
}

.hbi-typing-bubble span:nth-child(2){ animation-delay:.2s; }
.hbi-typing-bubble span:nth-child(3){ animation-delay:.4s; }

@keyframes hbiTypingDot{
    0%, 60%, 100%{ transform:translateY(0); opacity:.4; }
    30%{ transform:translateY(-5px); opacity:1; }
}

/* =========================================
   LEAD CAPTURE CARD
========================================= */

.hbi-lead-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:16px;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
}

.hbi-lead-card p{
    font-size:12.5px;
    font-weight:700;
    color:#333;
    margin-bottom:4px;
    display:flex;
    align-items:center;
    gap:6px;
}

.hbi-lead-card p i{
    color:#710014;
}

.hbi-lead-input{
    width:100%;
    padding:10px 12px;
    border:1.5px solid #ececec;
    border-radius:10px;
    font-size:12.5px;
    background:#fbfaf8;
    transition:.2s ease;
}

.hbi-lead-input:focus{
    outline:none;
    border-color:#710014;
    background:#fff;
}

.hbi-lead-submit{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:#710014;
    color:#fff;
    border:none;
    padding:11px;
    border-radius:10px;
    font-size:12.5px;
    font-weight:700;
    cursor:pointer;
    transition:.2s ease;
    margin-top:4px;
}

.hbi-lead-submit:hover{
    background:#8f021d;
}

.hbi-lead-submit:disabled{
    opacity:.7;
    cursor:not-allowed;
}

.hbi-lead-status{
    font-size:11.5px;
    text-align:center;
    min-height:14px;
}

/* =========================================
   INPUT ROW
========================================= */

.hbi-chat-input-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    border-top:1px solid #ececec;
    background:#fff;
    flex-shrink:0;
}

.hbi-chat-input-row input{
    flex:1;
    border:1.5px solid #ececec;
    border-radius:30px;
    padding:11px 18px;
    font-size:13px;
    background:#fbfaf8;
    transition:.2s ease;
}

.hbi-chat-input-row input:focus{
    outline:none;
    border-color:#710014;
    background:#fff;
}

.hbi-chat-input-row button{
    width:42px;
    height:42px;
    flex-shrink:0;
    border-radius:50%;
    background:#710014;
    color:#fff;
    border:none;
    cursor:pointer;
    transition:.2s ease;
    font-size:14px;
}

.hbi-chat-input-row button:hover{
    background:#8f021d;
    transform:scale(1.06);
}

/* =========================================
   FOOTER
========================================= */

.hbi-chat-footer{
    text-align:center;
    font-size:10.5px;
    color:#aaa;
    padding:8px 0 12px;
    background:#fff;
    flex-shrink:0;
}

/* =========================================
   SCROLLBAR
========================================= */

.hbi-chat-body::-webkit-scrollbar{
    width:5px;
}

.hbi-chat-body::-webkit-scrollbar-thumb{
    background:#ddd;
    border-radius:10px;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:480px){

    #hbiChatWidget{
        bottom:16px;
        right:16px;
    }

    #hbiChatWindow{
        width:calc(100vw - 32px);
        right:-8px;
        max-height:75vh;
    }

    .hbi-chat-body{
        max-height:50vh;
    }

    #hbiChatLauncher{
        width:56px;
        height:56px;
        font-size:21px;
    }
}