/* ================= AI Floating Button ================= */

#ai-btn{
position:fixed;
right:25px;
bottom:25px;
width:70px;
height:70px;
border-radius:50%;
background:#07182f;
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
box-shadow:0 10px 25px rgba(0,0,0,.30);
z-index:999999;
transition:.3s;
user-select:none;
}

#ai-btn:hover{
transform:scale(1.08);
background:#0099ff;
}

#ai-btn img{
width:36px;
height:36px;
object-fit:contain;
}

/* ===================================================
   UNNATI AI SUPPORT PAGE
   Consolidated by Claude on 2026-07-12 - this content
   was previously dumped as raw text at the bottom of
   assistant.php (duplicated twice) instead of living in
   this stylesheet, which is why the AI Support page
   showed visible CSS code on screen.
=================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#f4f8fc;
}

.assistant-page{
    width:100%;
    min-height:100vh;
    background:linear-gradient(135deg,#07182f,#103d70);
    padding:40px;
}

.assistant-header{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.assistant-logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.assistant-logo img{
    width:65px;
    height:65px;
    object-fit:contain;
}

.assistant-logo h2{
    color:#fff;
    font-size:28px;
    font-weight:700;
}

.assistant-logo p{
    color:#d7e8ff;
    font-size:15px;
}

.back-home{
    text-decoration:none;
    color:#fff;
    background:#0099ff;
    padding:12px 22px;
    border-radius:10px;
    font-weight:600;
    transition:.3s;
}

.back-home:hover{
    background:#0076d7;
}

.assistant-container{
    display:grid;
    grid-template-columns:40% 60%;
    gap:35px;
}

.assistant-left{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    border-radius:22px;
    padding:40px;
    color:#fff;
    box-shadow:0 20px 45px rgba(0,0,0,.25);
}

.assistant-left h1{
    font-size:42px;
    margin-bottom:20px;
    line-height:1.3;
}

.assistant-left p{
    font-size:17px;
    line-height:1.9;
    color:#dcecff;
    margin-bottom:35px;
}

.assistant-features{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.feature{
    display:flex;
    align-items:center;
    gap:15px;
    background:rgba(255,255,255,.08);
    padding:18px;
    border-radius:12px;
}

.feature i{
    font-size:24px;
    color:#00b4ff;
}

.feature span{
    font-size:16px;
    font-weight:600;
}

.assistant-right{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 20px 45px rgba(0,0,0,.18);
}

.chat-box{
    display:flex;
    flex-direction:column;
    height:720px;
}

.chat-header{
    display:flex;
    align-items:center;
    gap:15px;
    padding:22px;
    background:#07182f;
    color:#fff;
}

.chat-header img{
    width:55px;
    height:55px;
    object-fit:contain;
}

.chat-header h3{
    font-size:24px;
    margin-bottom:4px;
}

.chat-header small{
    color:#9cff9c;
}

.chat-body{
    flex:1;
    padding:25px;
    overflow-y:auto;
    background:#f4f8fc;
}

.bot-message,
.user-message{
    max-width:82%;
    padding:16px 20px;
    margin-bottom:18px;
    border-radius:16px;
    font-size:15px;
    line-height:1.8;
    animation:fadeUp .35s ease;
}

.bot-message{
    background:#ffffff;
    color:#07182f;
    border-left:4px solid #0099ff;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.user-message{
    margin-left:auto;
    background:#0099ff;
    color:#fff;
    border-bottom-right-radius:5px;
}

.chat-footer{
    padding:18px;
    border-top:1px solid #e3e3e3;
    background:#fff;
}

#assistantForm{
    display:flex;
    gap:12px;
}

#assistantForm input{
    flex:1;
    height:55px;
    border:1px solid #d5d5d5;
    border-radius:12px;
    padding:0 18px;
    font-size:15px;
    outline:none;
    transition:.3s;
}

#assistantForm input:focus{
    border-color:#0099ff;
    box-shadow:0 0 10px rgba(0,153,255,.20);
}

#sendBtn{
    width:60px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#00AEEF,#0066ff);
    color:#fff;
    font-size:20px;
    cursor:pointer;
    transition:.3s;
}

#sendBtn:hover{
    transform:scale(1.05);
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:992px){
    .assistant-container{
        grid-template-columns:1fr;
    }
    .chat-box{
        height:650px;
    }
}