/* css/chat-widget.css */

/* Modern Chat Button Formatting (Minimalist Look) */
#chatToggleBtn {
    bottom: 25px; 
    right: 25px; 
    width: 65px; 
    height: 65px; 
    z-index: 1050; 
    
    /* The Minimalist Colors */
    background: #ffffff;       /* White button background */
    color: #000000;            /* Black icon color */
    border: 2px solid #e0e0e0; /* Subtle gray ring around the button */
    
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Soft shadow */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
}

#chatToggleBtn:hover {
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* FLIP THE ICON: This points the chat bubble tail to the right */
#chatToggleBtn svg {
    transform: scaleX(-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;
    }
}