/* =====================================================
   SPI ASSISTANT
===================================================== */

.spi-assistant{

    position:fixed;

    right:30px;

    bottom:30px;

    z-index:9999;

}

/* =====================================================
   FLOATING BUTTON
===================================================== */

.assistant-toggle{

    width:68px;

    height:68px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#22C55E,#0EA5E9);

    color:#fff;

    box-shadow:
        0 15px 45px rgba(14,165,233,.35);

    transition:.35s;
    
    animation: assistantFloat 3s ease-in-out infinite;

}

@keyframes assistantFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.assistant-toggle:hover{

    transform:translateY(-6px) scale(1.05);

    box-shadow:
        0 20px 55px rgba(14,165,233,.45);

}

.assistant-toggle i{

    width:30px;

    height:30px;

}

/* =====================================================
   PANEL
===================================================== */

.assistant-panel{

    position:absolute;

    right:0;

    bottom:90px;

    width:360px;

    background:#fff;

    border-radius:26px;

    overflow:hidden;

    box-shadow:
        0 30px 80px rgba(0,0,0,.15);

    opacity:0;

    visibility:hidden;

    transform:translateY(25px);

    transition:.35s ease;

}

/* panel aktif */

.assistant-panel.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

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

.assistant-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 22px;

    background:#fff;

    border-bottom:1px solid #edf2f7;

}

.assistant-avatar{

    width:52px;

    height:52px;

    border-radius:16px;

    overflow:hidden;

    background:#f7f7f7;

    flex-shrink:0;

}

.assistant-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.assistant-title{

    flex:1;

    margin-left:15px;

}

.assistant-title h4{

    margin:0;

    font-size:18px;

    font-weight:700;

    color:#111827;

}

.assistant-title span{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:4px;

    color:#6b7280;

    font-size:13px;

}

.online-dot{

    width:9px;

    height:9px;

    border-radius:50%;

    background:#22C55E;

    animation:pulse 1.8s infinite;

}

.assistant-close{

    width:38px;

    height:38px;

    border:none;

    border-radius:12px;

    background:#f8fafc;

    cursor:pointer;

    transition:.3s;

}

.assistant-close:hover{

    background:#eef2f7;

}

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

.assistant-body{

    padding:24px;

}

.assistant-message{

    background:#f8fafc;

    border-radius:18px;

    padding:18px;

    font-size:15px;

    line-height:1.8;

    color:#475569;

    margin-bottom:22px;

}

/* =====================================================
   MENU
===================================================== */

.assistant-menu{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.assistant-item{

    width:100%;

    display:flex;

    align-items:center;

    gap:14px;

    padding:15px 18px;

    border-radius:16px;

    border:1px solid #edf2f7;

    background:#fff;

    color:#111827;

    font-weight:600;

    text-decoration:none;

    cursor:pointer;

    transition:.3s;

}

.assistant-item:hover{

    background:#ecfdf5;

    border-color:#22C55E;

    transform:translateX(5px);

}

.assistant-item i{

    width:20px;

    height:20px;

    color:#22C55E;

}

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

.assistant-footer{

    padding:18px;

    text-align:center;

    background:#f8fafc;

    border-top:1px solid #edf2f7;

    color:#64748b;

    font-size:14px;

}

/* =====================================================
   PULSE
===================================================== */

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(34,197,94,.5);

    }

    70%{

        box-shadow:0 0 0 12px rgba(34,197,94,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(34,197,94,0);

    }

}

/* ===================================
    AUTO BUBBLE
=================================== */

.assistant-bubble{

    position:absolute;

    bottom:90px;

    right:0;

    background:#fff;

    padding:14px 18px;

    border-radius:18px;

    width:220px;

    box-shadow:0 15px 40px rgba(0,0,0,.15);

    font-size:14px;

    line-height:1.7;

    opacity:0;

    transform:translateY(20px);

    transition:.35s;

}

.assistant-bubble.show{

    opacity:1;

    transform:translateY(0);

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:768px){

    .spi-assistant{

        right:18px;

        bottom:18px;

    }

    .assistant-panel{

        width:330px;

        max-width:calc(100vw - 36px);

    }

}

@media(max-width:480px){

    .assistant-panel{

        width:calc(100vw - 24px);

        right:-6px;

    }

    .assistant-toggle{

        width:60px;

        height:60px;

    }

}