/*
    See the JupyterLab Developer Guide for useful CSS Patterns:

    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
*/
/* /*
    See the JupyterLab Developer Guide for useful CSS Patterns:

    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
*/

/* Arrange elements in a vertical stack */
.chatbot-panel {
    padding: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Title styling */
.chatbot-title {
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 16px;
}

/* Container for the prompt box and return button */
.input-container {
    display: flex;
    gap: 8px;
    padding: 10px;
    margin-top: auto;
}

/* Style for the input box */
.input-container input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Style for the return button */
.input-container button {
    padding: 8px 16px;
    background-color: #7a7876;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.input-container button:hover {
    background-color: #9c9995;
}

/* Container for displaying chat messages */
.chat-container {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
}

/* Shared styles for all chat messages */
.chat-message {
    padding: 5px;
    margin-bottom: 5px;           /* Add some space inside the message box */
    word-wrap: break-word;       /* Wrap long words if necessary */
  }
  
  /* Style specifically for user messages */
.chat-message.user {
    text-align: right;           /* Align text to the right */
    margin-left: auto;           /* Push message to the right */
  }
  
  /* Style specifically for assistant messages */
.chat-message.assistant {
    text-align: left;            /* Align text to the left */
    margin-right: auto;          /* Push message to the left */
  }
  
  /* Optional: Style for system or error messages */
.chat-message.system {
    background-color: #ffe6e6;   /* Light red background */
    color: #a00;                 /* Dark red text */
    font-style: italic;          /* Italicize text */
    text-align: center;          /* Center-align system messages */
  }
  

