/* General styles for the container */
#help-bot-container {
    position: fixed;
    /* Adjust positioning as needed if you want it on the right, top, etc. */
    /* Example: bottom-right corner */
    bottom: 20px;
    right: 20px;
    left: auto; /* Remove left positioning if moving to right */
    z-index: 9999;
}

#help-bot-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

#help-bot-icon img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

/* Chatbox styles - MAKE IT VISIBLE BY DEFAULT */
#help-bot-chatbox {
    position: static; /* No longer absolute relative to a button */
    /* Adjust these values to position the chatbox directly */
    width: 300px; /* Fixed width for the chatbox */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); /* Slightly more prominent shadow */
    display: flex; /* Always display as flex */
    flex-direction: column; /* Stack messages and input vertically */
    max-height: 400px; /* Increased max height for a more usable chat window */
}

/* REMOVED: #help-bot-chatbox.open - this class is no longer needed */

#help-bot-messages {
    padding: 10px;
    overflow-y: auto; /* Enable scrolling for messages */
    flex-grow: 1; /* Allow messages area to take available space */
    border-bottom: 1px solid #eee; /* Add a separator between messages and input */
}

#help-bot-messages .bot-message {
    background-color: #e6f7ff; /* Lighter blue for bot messages */
    color: #333;
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 8px;
    text-align: left;
    font-size: 0.9em;
}

#help-bot-messages .user-message {
    background-color: #d9edf7; /* Slightly darker blue for user messages */
    color: #333;
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 8px;
    text-align: right;
    font-size: 0.9em;
}

#help-bot-input-area {
    padding: 10px;
    display: flex; /* Flexbox for input field and send button */
}

#help-bot-input-area input[type="text"] {
    flex-grow: 1; /* Input field takes most space */
    padding: 8px;
    border: 1px solid #007bff; /* Accent border color */
    border-radius: 5px 0 0 5px; /* Rounded left side */
    font-size: 0.9em;
}

#help-bot-input-area button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 0 5px 5px 0; /* Rounded right side */
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

#help-bot-input-area button:hover {
    background-color: #0056b3;
}