/* * File: guide-style.css
 * Deskripsi: Gaya visual untuk fitur pencarian dan animasi Karakter Robot Pencari (Fully Responsive & Fix Overflow)
 */

:root {
    --blgs-primary: #1A233A; 
    --blgs-secondary: #F4F7F6; 
    --blgs-accent: #00E5FF; 
    --blgs-text-dark: #2C3E50;
    --blgs-text-light: #FFFFFF;
    --blgs-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    --blgs-radius-large: 20px;
    --blgs-radius-small: 10px;
}

/* Memastikan semua elemen di dalam widget menghitung padding ke dalam ukurannya (Mencegah elemen terpotong/overflow) */
#blgs-guide-container, 
#blgs-guide-container * {
    box-sizing: border-box;
}

/* --- TOMBOL MENGAMBANG --- */
#blgs-trigger-guide {
    position: fixed;
    bottom: 30px;
    left: 30px; 
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blgs-primary), #2B3A55);
    border: 2px solid var(--blgs-accent);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: floatTrigger 3s ease-in-out infinite;
    box-sizing: border-box;
}

#blgs-trigger-guide:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.6);
}

.trigger-bot-face {
    display: flex;
    gap: 12px;
}

.trigger-eye {
    width: 12px;
    height: 12px;
    background-color: var(--blgs-accent);
    border-radius: 50%;
    animation: blink 4s infinite;
}

/* --- KOTAK OBROLAN --- */
#blgs-guide-container {
    position: fixed;
    bottom: 110px;
    left: 30px; 
    width: 380px;
    height: 550px;
    background-color: var(--blgs-text-light);
    border-radius: var(--blgs-radius-large);
    box-shadow: var(--blgs-shadow);
    display: flex;
    flex-direction: column;
    z-index: 9998;
    font-family: 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

#blgs-guide-container.blgs-hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.blgs-chat-header {
    background: var(--blgs-primary);
    color: var(--blgs-text-light);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--blgs-accent);
    width: 100%;
}

.blgs-guide-name {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--blgs-accent);
}

#blgs-close-guide {
    background: none;
    border: none;
    color: var(--blgs-text-light);
    font-size: 26px;
    cursor: pointer;
    opacity: 0.7;
    padding: 0;
    line-height: 1;
}

#blgs-close-guide:hover { opacity: 1; }

.blgs-chat-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: var(--blgs-secondary);
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.blgs-bubble-container {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.blgs-bubble-text {
    background-color: var(--blgs-text-light);
    color: var(--blgs-text-dark);
    padding: 14px 18px;
    border-radius: 0 var(--blgs-radius-large) var(--blgs-radius-large) var(--blgs-radius-large);
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    max-width: 75%;
    border: 1px solid #E2E8F0;
}

#blgs-results-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 65px;
    width: 100%;
}

.blgs-result-card {
    background-color: var(--blgs-text-light);
    border-left: 4px solid var(--blgs-accent);
    border-radius: 6px;
    padding: 12px 15px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    width: 100%;
}

.blgs-result-card:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.blgs-result-meta {
    display: inline-block;
    background: rgba(0, 229, 255, 0.1);
    color: #009eb3; 
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 12px;
    margin-bottom: 6px;
    border: 1px solid rgba(0, 229, 255, 0.3);
}

.blgs-result-card a {
    text-decoration: none;
    color: var(--blgs-primary);
    font-weight: 600;
    font-size: 13px;
    display: block;
    line-height: 1.4;
}

.blgs-chat-footer {
    padding: 18px;
    background-color: var(--blgs-text-light);
    border-top: 1px solid #E2E8F0;
    width: 100%;
}

#blgs-search-input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #E2E8F0;
    border-radius: 30px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
    background-color: var(--blgs-secondary);
}

#blgs-search-input:focus {
    border-color: var(--blgs-accent);
    background-color: var(--blgs-text-light);
}

/* === ANIMASI CSS KARAKTER AI === */
.blgs-bot {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--blgs-primary), #3A4B6B);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 5px 15px rgba(26, 35, 58, 0.4);
    border: 2px solid rgba(0, 229, 255, 0.3);
    flex-shrink: 0; /* Mencegah avatar menyusut jika teks panjang */
}

.blgs-bot.idle { animation: floatBot 4s ease-in-out infinite; }
.blgs-bot.idle .eye { animation: blink 4s infinite; }
.blgs-bot.idle .bot-mouth { width: 12px; height: 3px; border-radius: 2px; }

.blgs-bot.talking { animation: floatBot 2s ease-in-out infinite; }
.blgs-bot.talking .eye { height: 4px; border-radius: 2px; }
.blgs-bot.talking .bot-mouth { animation: talkMouth 0.3s infinite alternate; }

.bot-face { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 5px; }
.bot-eyes { display: flex; gap: 12px; }

.eye {
    width: 10px;
    height: 10px;
    background-color: var(--blgs-accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--blgs-accent);
    transition: all 0.2s;
}

.bot-mouth {
    background-color: var(--blgs-accent);
    box-shadow: 0 0 8px var(--blgs-accent);
    transition: all 0.2s;
}

/* --- KEYFRAMES --- */
@keyframes blink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}
@keyframes floatBot {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}
@keyframes floatTrigger {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}
@keyframes talkMouth {
    0% { width: 8px; height: 4px; border-radius: 4px; }
    100% { width: 14px; height: 10px; border-radius: 50%; }
}
@keyframes talkMouthMobile {
    0% { width: 6px; height: 3px; border-radius: 3px; }
    100% { width: 10px; height: 8px; border-radius: 50%; }
}

/* ========================================================
   RESPONSIVE MEDIA QUERIES (OPTIMASI UNTUK LAYAR MOBILE) 
   ======================================================== */
@media (max-width: 768px) {
    #blgs-trigger-guide {
        width: 50px;
        height: 50px;
        bottom: 20px;
        left: 20px;
    }
    
    .trigger-eye { width: 8px; height: 8px; }
    .trigger-bot-face { gap: 8px; }

    #blgs-guide-container {
        width: calc(100vw - 40px);
        height: 70vh; 
        max-height: 480px;
        bottom: 85px;
        left: 20px;
    }

    .blgs-chat-header { padding: 12px 15px; }
    .blgs-guide-name { font-size: 14px; }
    #blgs-close-guide { font-size: 24px; }
    
    .blgs-chat-body { padding: 15px; gap: 12px; }
    .blgs-bubble-text { 
        font-size: 13px; 
        padding: 10px 14px; 
        max-width: 85%;
    }

    .blgs-bot {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .bot-face { margin-top: 3px; gap: 4px; }
    .bot-eyes { gap: 8px; }
    .eye { width: 8px; height: 8px; }
    .bot-mouth { width: 10px; height: 2px; }
    
    .blgs-bot.talking .bot-mouth {
        animation: talkMouthMobile 0.3s infinite alternate;
    }

    #blgs-results-container {
        padding-left: 55px; 
    }
    .blgs-result-card { padding: 10px 12px; }
    .blgs-result-card a { font-size: 12px; }
    .blgs-result-meta { font-size: 9px; padding: 2px 6px; }

    .blgs-chat-footer { padding: 12px; }
    #blgs-search-input { 
        padding: 12px 16px; 
        font-size: 13px; 
    }
}