/* css/style.css */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding-bottom: 60px;
    /* Space for input box */
    box-sizing: border-box;
    background-color: #121212;
    /* Dark gray background */
    color: white;
    /* White text */
}

#chatContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align items to the start */
    padding: 20px;
    height: calc(100vh - 100px);
    /* Adjust height as needed */
    overflow-y: auto;
    /* Enable scrolling for overflow */
    background-color: #1a1a1a;
    /* Slightly lighter gray for chat container */
    border-radius: 5px;
    /* Optional rounded corners */
    margin: 10px;
}

#inputContainer {
    display: flex;
    /* Use flexbox layout */
    align-items: center;
    /* Vertically center align items */
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #333333;
    padding: 10px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

#userInput {
    flex-grow: 1;
    /* Allow textarea to fill available space, adjusting for button */
    width: auto;
    /* Override width to work with flex-grow */
    padding: 10px;
    /* Inner padding for text area */
    padding-right: 40px;
    /* Extra padding on the right to make room for the send button */
    background-color: #262626;
    /* Background color of the text area */
    border: none;
    /* Remove default border */
    color: white;
    /* Text color */
    border-radius: 5px;
    /* Rounded corners */
    resize: none;
    /* Disable resizing */
    overflow-y: hidden;
    /* Hide vertical scrollbar */
    box-sizing: border-box;
    /* Box sizing to include padding in width calculation */
    margin-right: 10px;
    /* Spacing between the textarea and the send button */
}


#userInput::placeholder {
    /* color: #04f718; */
    color: #CCCCCC;
    /* Light gray color for placeholder text */
    /* You can adjust the color as needed to make it brighter */
}

button#sendButton {
    position: absolute;
    /* Position the button absolutely within the container */
    right: 20px;
    /* Distance from the right edge of the inputContainer */
    padding: 0 10px;
    /* Adjust padding to reduce button size if needed */
    height: 38px;
    /* Match the height of your text area or adjust as needed */
    /* Other button styles remain the same */
}

/* Add this to remove default textarea border in some browsers */
#userInput:focus {
    outline: none;
}

/* send button (but seems to effect all buttons) */
button {
    padding: 5px;
    background-color: white;
    /* White background for the button */
    border: none;
    cursor: pointer;
    border-radius: 5px;
    /* Rounded corners */
    position: relative;
    /* Needed for absolute positioning of pseudo-element */
}

button:hover {
    background-color: #f2f2f2;
    /* Slightly different color on hover */
}

/* the upp arrow at right of user input box */
button::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    border: solid #121212;
    border-width: 0 3px 3px 0;
    /* Adjust thickness here */
    display: inline-block;
    padding: 3px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    /* Adjust top and left to center the arrow */
    margin-top: -4px;
    margin-left: -4px;
}

button:focus {
    outline: none;
    /* Optional: removes the outline on focus */
}

.text-like-button {
    background-color: transparent;
    /* Removes the default button background */
    border: none;
    /* Removes the default border */
    color: inherit;
    /* Inherits the text color from the parent element */
    font: inherit;
    /* Inherits font properties from the parent element */
    cursor: pointer;
    /* Changes cursor to indicate it's clickable */
    text-decoration: underline;
    /* Adds underline to indicate it's a link/button */
    padding: 0;
    /* Removes default padding */
    margin: 0;
    /* Removes default margin */
    margin-right: 10px;
    margin-left: 10px;
    /* Adds margin to separate the buttons */
}

.text-like-button::after {
    content: none;
}


.user-message,
.bot-message {
    background-color: transparent;
    /* Remove colored background */
    color: #CCCCCC;
    /* White text */
    padding: 10px;
    margin: 5px 0 5px 20px;
    border-radius: 10px;
    text-align: left;
    max-width: 80%;
    word-wrap: break-word;
    border: 2px solid;
    /* Add border */
}

.user-message {
    border-color: #4a8dca;
    /* Light blue border for user message */
    font-weight: normal;
    line-height: 1.6;
}

.bot-message {
    border-color: #e5e5e5;
    /* Light gray border for bot message */
    color: #CCCCCC;
    /* Darker text color for contrast */
    font-weight: normal;
    line-height: 1.6;
}

.intro-message {
    color: #CCCCCC;
    /* Adjust the color to your preference */
    font-weight: normal;
    line-height: 1.6;
    /* Adjusted line height */
    padding: 10px;
    margin: 5px 0;
    text-align: left;
    /* Add other styling properties as needed */
}

.dots span {
    display: inline-block;
    width: 10px;
    /* Increased size */
    height: 10px;
    /* Increased size */
    border-radius: 50%;
    background-color: white;
    /* Changed to white for visibility */
    margin: 0 2px;
    animation: dotFlashing 1s infinite linear alternate;
    animation-delay: 0.5s;
}

.dots span:nth-child(2) {
    animation-delay: 0.6s;
}

.dots span:nth-child(3) {
    animation-delay: 0.7s;
}

@keyframes dotFlashing {
    0% {
        background-color: white;
    }

    50%,
    100% {
        background-color: #121212;
        /* Lighter color for the animation */
    }
}

.message-label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #FFFFFF;
    /* White color for labels for better visibility */
}

.user-label {
    color: #4a8dca;
    /* Light blue color for user label */
    text-align: left;
}

.bot-label {
    color: #e5e5e5;
    /* Light gray color for bot label */
    text-align: left;
}

.more-button {
    color: #CCCCCC;
    /* Change to desired color */
    font-weight: bold;
    cursor: pointer;
    margin-left: 5px;
    text-decoration: underline;
    /* Indicates that it's clickable */
}

/* Optional: Change appearance on hover */
.more-button:hover {
    color: #377ba8;
    /* Darker shade when hovered */
    text-decoration: none;
    /* Can change or remove the underline on hover */
}

#logoutContainer {
    position: fixed;
    z-index: 1000;
    top: 10px;
    /* Distance from the top of the viewport */
    right: 10px;
    /* Distance from the right edge of the viewport */
    /* Ensure it's above other elements */
    /* bottom right */
    /* top: calc(100vh - 100px);
    right: 0px; */
}

#logoutButton {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #CCCCCC;
    font-family: Arial, sans-serif;
}

#logoutButton::after {
    content: none;
}


#startImage {
    max-width: 25%;
    height: auto;
    display: block;
    margin: 0 auto;
    /* Centering the image */
}

.fade-out {
    animation: fadeOut 1s forwards;
    /* Added 'forwards' to retain final styles */
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* for areas visible to screen readers but not the eye */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}