/* css/chat-widget.css */

/* Chat Button Formatting */
#chatToggleBtn {
    bottom: 20px; 
    right: 20px; 
    width: 60px; 
    height: 60px; 
    z-index: 1050; 
    font-size: 28px;
    transition: transform 0.2s ease-in-out;
}

#chatToggleBtn:hover {
    transform: scale(1.1);
}

/* Base Desktop Chat Box */
#chatBox {
    bottom: 90px; 
    right: 20px; 
    width: 380px; 
    z-index: 1050; 
    display: none; 
    border-radius: 12px; 
    overflow: hidden;
}

#chatLogs {
    height: 350px; 
    overflow-y: auto; 
    background-color: #f8f9fa;
}

/* Markdown Spacing Fixes */
#chatLogs .bg-dark p { margin-bottom: 0.5rem; }
#chatLogs .bg-dark p:last-child { margin-bottom: 0; }
#chatLogs .bg-dark pre { background: #111; padding: 10px; border-radius: 5px; overflow-x: auto; margin-top: 10px;}
#chatLogs .bg-dark code { color: #0dcaf0; }

/* 📱 MOBILE FIX: "Bottom Sheet" Design */
@media (max-width: 576px) {
    #chatBox {
        width: 100% !important;
        height: 65vh !important; /* Only take up the bottom 65% of the screen */
        bottom: 0 !important;
        right: 0 !important;
        top: auto !important; /* Forces it to stay anchored to the bottom */
        border-radius: 20px 20px 0 0 !important; /* Curved top corners only */
        z-index: 1060; 
        box-shadow: 0px -5px 15px rgba(0,0,0,0.3) !important;
    }
    
    #chatLogs {
        flex: 1 1 auto !important; 
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth Android/iOS scroll */
    }

    #chatToggleBtn {
        bottom: 15px !important;
        right: 15px !important;
    }
}

/* 📱 MOBILE LANDSCAPE FIX: Take full screen when phone is sideways */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    #chatBox {
        width: 100% !important;
        height: 100vh !important; /* Overrides the 65vh to take full height */
        bottom: 0 !important;
        right: 0 !important;
        top: 0 !important;
        border-radius: 0 !important; /* Removes the curved corners for full screen */
        z-index: 1060; 
    }
    #chatLogs {
        flex: 1 1 auto !important; 
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}