/* ====================================================== */
/*  Base & Mobile First Styles                          */
/* ====================================================== */
.chatbot-wrapper {
    position: relative;
    margin-top: 20px;
    padding: 0 10px; /* Add some padding on mobile */
}

.chatbot {
    width: 100%; /* Full width on mobile */
    height: 450px;/* Use viewport height for better adaptability */
    /*max-height: 500px;  Set a max height */
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    font-family: sans-serif;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto; /* Center the chatbot horizontally */
}

.chat-header {
    background-color: #f1f1f1;
    padding: 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    color: #902943;
    font-weight: 22px;
    font-size: 18px;
}
#expand-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #333;
    margin-left: auto;
    margin-right: 5px;
}
.chatbot.expanded {
    position: fixed;
    top: 5%;
    left: 5%;
    width: 90vw !important;
    height: 80vh !important;
    max-height: 80vh;
    z-index: 9999;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.chatbot.expanded .chat-area {
    height: 100%;
}

/*.chat-header img {
    width: 30px;
    height: 30px;
    border-radius: 0;
    margin-right: 20px;
}*/

.chat-header p {
    margin: 0 auto;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    flex-grow: 1; /* Center the text */
    
}

.chat-area {
    height: 100%;
    padding: 10px;
    overflow-y: auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.message {
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 18px;
    max-width: 90%;
    line-height: 1.4;
    font-size: 0.9em;
}

.user-message {
    background-color: #902943;
    color: white;
    align-self: flex-end;
    margin-left: auto;
}

.bot-message {
    background-color: #e9e9eb;
    color: black;
    align-self: flex-start;
}

.typing-indicator {
    background-color: #e9e9eb;
    color: #888;
    align-self: flex-start;
    font-style: italic;
}

.chat-input-area {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ccc;
    background-color: #f1f1f1;
}

#user-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    margin-right: 10px;
}

/*#send-btn {
    background-color: #902943;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#send-btn:hover {
    background-color: #444;
}

#send-btn:disabled {
    background-color: #a0cfff;
    cursor: not-allowed;
}*/

#send-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#send-btn img.send-icon {
    width: 40px;  /* Adjust as needed */
    height: 40px; /* Adjust as needed */
    object-fit: contain;
}

#send-btn:disabled img.send-icon {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ====================================================== */
/*  Tablet Styles (Screens wider than 768px)            */
/* ====================================================== */
@media (min-width: 768px) {
    .chatbot-wrapper {
        padding: 0; /* Remove mobile padding */
    }
    .chatbot {
         height: 300px; /* A fixed height for tablets */
    }
     .chat-header p {
        font-size: 1em; /* Restore default font size */
    }
    .message {
        max-width: 80%;
        font-size: 1em;
    }
}

/* ====================================================== */
/*  Desktop Styles (Screens wider than 1024px)          */
/* ====================================================== */
@media (min-width: 1024px) {
    .chatbot-wrapper {
        margin-top: 50px; /* Restore original margin */
    }
    .chatbot {
        width: 1000px; /* <--- THIS IS THE KEY CHANGE FOR DESKTOP */
        height: 250px; /* Give it a bit more height on desktop */
    }
}

@media (max-width: 767px) {
    .chatbot {
        height: 300px; /* or set exact pixel height like 500px */
        
    }

        .chat-area {
        flex-grow: 1;
        overflow-y: auto;
        max-width: 300px;
    }
}