/* ==========================================================================
   CHATBOT STYLES 
   ========================================================================== */
#chatbot-container { position: fixed; bottom: 20px; right: 20px; width: 350px; height: 500px; background-color: #ffffff; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); display: none; flex-direction: column; z-index: 10000; overflow: hidden; border: 1px solid #ddd; }
#chatbot-header { background-color: #e2c926; color: black; padding: 15px; font-weight: bold; text-align: center; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;}
#chatbot-header img { width: 25px; height: 25px; border-radius: 50%; }
#close-btn { position: absolute; top: 12px; right: 15px; background: transparent; color: black; border: none; font-size: 1.2rem; cursor: pointer; font-weight: bold;}
#chatbox { flex-grow: 1; padding: 15px; overflow-y: auto; background-color: #f9f9f9; display: flex; flex-direction: column; }

/* Chat Messages Bubbles */
.message { display: flex; align-items: flex-start; margin-bottom: 15px; font-size: 0.9rem; line-height: 1.4; }
.user-message { justify-content: flex-end; }
.user-message div { background-color: #FFD700; color: #2b2b2b; padding: 10px 15px; border-radius: 15px 15px 0 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); max-width: 80%; word-wrap: break-word;}
.bot-message { justify-content: flex-start; }
.bot-message img { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; margin-top: 5px; }
.bot-message div { background-color: #fff; border: 1px solid #eee; color: #2b2b2b; padding: 10px 15px; border-radius: 15px 15px 15px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); max-width: 80%; word-wrap: break-word;}

/* Menu Buttons inside Chat */
.button-choice { background-color: #fff; color: #2b2b2b; border: 1px solid #FFC107; padding: 10px 15px; margin: 5px 0; border-radius: 5px; cursor: pointer; transition: 0.3s ease; font-size: 0.9rem; width: 100%; text-align: left; font-weight: 600; }
.button-choice:hover { background-color: #FFD700; color: #2b2b2b; }

/* Input Area */
.chatbot-input-container { display: flex; padding: 10px; background: #fff; border-top: 1px solid #eee; }
#userInput { flex-grow: 1; padding: 10px 15px; border: 1px solid #ddd; border-radius: 50px; outline: none; font-size: 0.9rem; background: #f9f9f9; }
#userInput:focus { border-color: #FFC107; background: #fff; }
#send-btn { background: linear-gradient(90deg, #FFD700 0%, #FFC107 100%); color: #2b2b2b; border: none; border-radius: 50px; cursor: pointer; margin-left: 10px; font-weight: bold; padding: 0 20px; transition: 0.3s; }
#send-btn:hover { filter: brightness(0.95); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3); }

/* Floating Icon (Desktop Default) */
#chat-icon { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    
    /* GINAMIT NATIN ANG 'background' PARA GUMANA ANG GRADIENT */
    background: linear-gradient(90deg, #FFD700 0%, #FFC107 100%); 
    
    
    color: #2b2b2b; 
    
    border-radius: 50px; 
    padding: 15px 25px; 
    cursor: pointer; 
    font-weight: bold; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
    z-index: 10000; 
    font-size: 1rem; 
    border: 2px solid #fff; 
    transition: 0.3s;
}
#chat-icon:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }

/* ==========================================================================
   MOBILE RESPONSIVENESS
   ========================================================================== */
@media (max-width: 480px) {
    
    #chatbot-container { width: 90%; height: 80vh; bottom: 10px; right: 5%; }
    
   
    #chat-icon { 
        padding: 10px 18px; 
        font-size: 0.85rem; 
        bottom: 15px;       
        right: 15px;        
    }
}