body {
       font-family: Arial, sans-serif;
       margin: 0;
       padding: 20px;
       background-color: #f8f9fa;
   }

   h1 {
       text-align: center;
   }

   .container {
       max-width: 900px;
       margin: 0 auto;
   }

   .card {
       background: white;
       border: 1px solid #ddd;
       border-radius: 8px;
       padding: 20px;
       margin-bottom: 20px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }

   .chatbot-item {
       padding: 20px;
       margin-bottom: 15px;
       background-color: #ffffff;
       border: 1px solid #ddd;
       border-radius: 6px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .chatbot-info {
       flex-grow: 1;
       display: flex;
       flex-direction: column;
   }

   .chatbot-info span {
       margin: 5px 0;
   }

   .status {
       font-weight: bold;
   }

   .status.Stopped {
       color: gray;
   }

   .status.Started {
       color: green;
   }

   .chatbot-buttons {
       flex-shrink: 0;
   }

   button {
       background: #007bff;
       color: white;
       border: none;
       cursor: pointer;
       padding: 10px 15px;
       font-size: 14px;
       border-radius: 6px;
       margin-right: 5px;
   }

   /* Start Button */
button.start {
    background-color: green;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

/* Delete and Stop Button */
button.delete,
button.stop {
    background-color: red;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

/* Chat Button */
button.chat {
    background-color: blue;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

/* Button Hover Effects */
button:hover {
    opacity: 0.8;
}


   button:hover {
       background: #0056b3;
   }

   /* Spinner for Start Button */
    .spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid white; /* Outer color */
        border-top: 2px solid green; /* Inner color to show spinning effect */
        border-radius: 50%;
        animation: spin 1s linear infinite; /* Infinite spin */
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    /* Fullscreen Chat Window */
.chat-window {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    z-index: 1000; /* Ensure it sits above other elements */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 20px;
}

/* Chat Window Header */
#chatWindowHeader {
    display: flex; /* Enables flexbox */
    justify-content: space-between; /* Pushes button to the far right */
    align-items: center; /* Vertically aligns button and text */
    padding: 10px; /* Adds spacing inside the header */
    border-bottom: 1px solid #ddd; /* Retains a subtle border for division */
    background-color: transparent; /* Remove background color */
}


/* Chat Messages Window */
#chatMessages {
    display: flex; /* Enables flexbox layout */
    flex-direction: column; /* Makes messages stack vertically */
    justify-content: flex-start; /* Align messages at the top */
    align-items: flex-start; /* Align messages horizontally at the start */
    height: 300px; /* Fixed height for the chat window */
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 10px; /* Add spacing around the messages */
    background-color: transparent; /* Retain clean background */
    border: 1px solid #ddd; /* Add a thin border */
    border-radius: 5px; /* Rounded corners for a clean look */
    box-sizing: border-box; /* Ensure padding is inside the height */
    margin-bottom: 10px; /* Space below the window */
}

/* Loading Spinner */
#loadingSpinner {
    align-self: center; /* Center the spinner horizontally */
    margin-top: auto; /* Push spinner to the bottom of the container */
    padding-top: 5px; /* Optional spacing above spinner */
}


/* Chat Messages Display */
.chat-messages {
    flex: 1; /* Take all available height */
    overflow-y: scroll; /* Enable scrolling for overflowing messages */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #ffffff;
    margin: 10px 0;
}

/* Input and Buttons Area */
.chat-footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Message Input Field */
.chat-input {
    flex: 1; /* Stretch the input field across available space */
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Buttons */
.chat-btn {
    padding: 10px 15px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
}

.chat-btn.send {
    background-color: #0078d7;
}

.chat-btn.close {
    background-color: red; /* Match the styling of the Delete button */
    color: white; /* Button text color */
    border: none; /* Remove default border */
    padding: 10px 15px; /* Adds internal spacing */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 14px; /* Consistent text size */
    white-space: nowrap; /* Prevent text from wrapping */
    margin-left: auto; /* Push the button to the far right (if needed) */
}

.chat-btn.close:hover {
    background-color: darkred; /* Slightly darken the red color on hover */
}


.chat-btn.close {
    background-color: #d9534f;
}


/* Chat Window Footer */
#chatWindowFooter {
    display: flex; /* Enables flex layout */
    align-items: center; /* Vertically center-align items */
    gap: 10px; /* Adds spacing between textarea and buttons */
    padding: 10px; /* Adds spacing inside the footer */
    border-top: 1px solid #ddd; /* Retains a subtle border for division */
    background-color: transparent; /* Remove background color */
}


/* Input Field (textarea) */
#chatInput {
    flex-grow: 1; /* Makes the input field expand to fill available space */
    border: 1px solid #ddd; /* Border styling */
    border-radius: 5px; /* Adds rounded corners */
    padding: 10px; /* Internal spacing within the textarea */
    resize: none; /* Disables manual resizing */
    font-size: 14px; /* Adjust font size for consistency */
    min-height: 50px; /* Ensures a consistent height for the input */
    box-sizing: border-box; /* Includes padding in the element's total width/height */
}

/* Buttons (Send and Clear Chat) */
.chat-btn {
    white-space: nowrap; /* Prevents wrapping of button text */
    padding: 10px 20px; /* Adds padding inside the buttons */
    border: none; /* Removes default border */
    border-radius: 5px; /* Adds rounded corners for buttons */
    cursor: pointer; /* Changes cursor to pointer on hover */
    font-size: 14px; /* Adjusts text size */
}

.chat-btn.send {
    background-color: #007bff; /* "Send" button default color */
    color: white; /* "Send" button text color */
}

.chat-btn.send:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.chat-btn.clear {
    background-color: #6c757d; /* "Clear Chat" button default color */
    color: white; /* "Clear Chat" button text color */
}

.chat-btn.clear:hover {
    background-color: #5a6268; /* Slightly darker gray on hover */
}

/* Close Chat Button */
.chat-btn.close {
    background-color: red; /* Same as the delete button */
    color: white; /* Button text color */
    border: none; /* Remove default border */
    padding: 10px 15px; /* Internal spacing */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 14px; /* Font size for consistency */
    margin-left: auto; /* Push to the far right of the header */
    white-space: nowrap; /* Ensure text doesn't wrap */
}

.chat-btn.close:hover {
    background-color: darkred; /* Darker red on hover */
}

.user-message, .bot-message {
    margin-bottom: 15px; /* Spacing between messages */
    padding: 10px; /* Inner padding for readability */
    border-radius: 5px; /* Optional: Rounded corners */
}

.user-message {
    background-color: #e0f7fa; /* Light blue color for user messages */
    text-align: right; /* Align user's message to the right */
}

.bot-message {
    background-color: #f1f8e9; /* Light green color for bot messages */
    text-align: left; /* Align bot's message to the left */
}