body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #1E1E1E; /* Dark background color */
    color: #EDEDED; /* Light text color */
    margin: 0;
    padding: 0 20px;
}

.code-pre {
    white-space: pre-wrap; /* Preserve newlines and wrap text */
    animation: typing 3s steps(20) infinite;
}

/* Keyframe animation for typing effect */
@keyframes typing {
    from {
        width: 0;
    }
}

#userInput {
    position: fixed;
    bottom: 0;
    left: 20px;
    width: calc(100% - 40px);
    background-color: #1E1E1E; /* Darker background color */
    padding: 10px; /* Add padding for spacing */
    box-sizing: border-box; /* Include padding in width calculation */
    z-index: 1; /* Ensure it's above the chatbox */
}

#header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.btn {
    display: flex;
    gap: 10px;
}

.btn button {
    padding: 10px 20px; /* Button padding */
    border: none;
    border-radius: 5px; /* Button border radius */
    background-color: #4CAF50; /* Button background color */
    color: white; /* Button text color */
    font-size: 16px; /* Button text size */
    cursor: pointer;
    transition: background-color 0.3s; /* Smooth transition */
}

.btn button:hover {
    background-color: #45a049; /* Darker background color on hover */
}

#header img {
    height: 80px
}

#chatbox {
    overflow-y: auto; /* Enable vertical scrolling if content exceeds height */
    height: calc(100vh - 140px); /* Maximum height for chatbox */
    padding-bottom: 60px; /* Add padding at the bottom for input container */
    box-sizing: border-box; /* Include padding in height calculation */
    background-color: #273443; /* Lighter background color for the chatbox */
}

#sagetextInput {
    width: 100%;
    border: none;
    border-bottom: 2px solid #075E54; /* WhatsApp green */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    background-color: transparent; /* Transparent text input background */
    color: #fff; /* Dark text color */
    padding: 5px 0; /* Add some padding to the top and bottom */
    transition: border-bottom 0.3s ease; /* Smooth transition for the border */
    outline: none; /* Remove default focus outline */
}

#sagetextInput:focus {
    border-bottom: 2px solid #34B7F1; /* Light blue when focused */
}

#sagebuttonInput {
    padding: 4px 12px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    background-color: #075E54; /* WhatsApp green */
    color: #EDEDED; /* Light text color */
    border: none;
    cursor: pointer;
}

#eventstextInput {
    width: 100%;
    border: none;
    border-bottom: 2px solid #075E54; /* WhatsApp green */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    background-color: transparent; /* Transparent text input background */
    color: #fff; /* Dark text color */
    padding: 5px 0; /* Add some padding to the top and bottom */
    transition: border-bottom 0.3s ease; /* Smooth transition for the border */
    outline: none; /* Remove default focus outline */
}

#eventstextInput:focus {
    border-bottom: 2px solid #34B7F1; /* Light blue when focused */
}

#eventsbuttonInput {
    padding: 4px 12px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    background-color: #075E54; /* WhatsApp green */
    color: #EDEDED; /* Light text color */
    border: none;
    cursor: pointer;
}

#truckistantextInput {
    width: 100%;
    border: none;
    border-bottom: 2px solid #075E54; /* WhatsApp green */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    background-color: transparent; /* Transparent text input background */
    color: #fff; /* Dark text color */
    padding: 5px 0; /* Add some padding to the top and bottom */
    transition: border-bottom 0.3s ease; /* Smooth transition for the border */
    outline: none; /* Remove default focus outline */
}

#truckistantextInput:focus {
    border-bottom: 2px solid #34B7F1; /* Light blue when focused */
}

#truckistanbuttonInput {
    padding: 4px 12px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    background-color: #075E54; /* WhatsApp green */
    color: #EDEDED; /* Light text color */
    border: none;
    cursor: pointer;
}

.userText {
    color: #EDEDED; /* Light text color */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 17px;
    text-align: left; /* Change text alignment to left */
    padding: 8px; /* Add padding */
    border-radius: 10px; /* Add border-radius for rounded corners */
    max-width: 50%; /* Limit the maximum width */
    height: auto;
    word-wrap: break-word;
    background-color: #075E54; /* WhatsApp green */
    margin-bottom: 10px; /* Add margin between messages */
    margin-right: 25px;
    clear: both; /* Ensure messages wrap properly */
    float: right; /* Align user messages to the left */
}

.userText span {
    background-color: #075E54; /* WhatsApp green */
    padding: 2px;
    border-radius: 2px;
    margin-left: 5px; /* Increase margin for better separation */
}


.botText {
    color: #EDEDED; /* Light text color */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 17px;
    text-align: left;
    padding: 8px; /* Add padding */
    border-radius: 10px; /* Add border-radius for rounded corners */
    background-color: #0D1F23;  /* WhatsApp blue */
    margin-bottom: 10px; /* Add margin between messages */
    clear: both; /* Ensure messages wrap properly */
    max-width: 50%; /* Limit the maximum width */
    margin-left: 25px;
    height: auto;
    word-wrap: break-word;
    float: left; /* Align bot messages to the right */
}

.botText span {
    background-color: #0D1F23;  /* WhatsApp blue */
    padding: 2px;
    border-radius: 2px;
    margin-right: 10px; /* Increase margin for better separation */
}

#tidbit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
}

#sageclearChatBtn {
    background-color: #ff5252; /* Red color for clear chat button */
}

#eventsclearChatBtn {
    background-color: #ff5252; /* Red color for clear chat button */
}

#truckistanclearChatBtn {
    background-color: #ff5252; /* Red color for clear chat button */
}

.actionButton {
        color: white;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        font-size: 14px;
        border-radius: 5px;
}

#buttonInput {
    background-color: #009688; /* Green color for send button */
    margin-right: 10px; /* Add margin between buttons */
}

.actionButton:hover {
    filter: brightness(85%); /* Reduce brightness on hover */
}

#userInput {
    display: flex;
    align-items: center;
}

#textInput {
    flex: 1;
    margin-right: 10px; /* Add margin between input and buttons */
}

/*Pending message animation*/
.is-typing {
    color: #EDEDED; /* Light text color */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    text-align: left;
    padding: 8px; /* Add padding */
    border-radius: 10px; /* Add border-radius for rounded corners */
    background-color: #0D1F23; /* WhatsApp blue */
    margin-bottom: 10px; /* Add margin between messages */
    clear: both; /* Ensure messages wrap properly */
    max-width: 50%; /* Limit the maximum width */
    margin-left: 25px;
    height: 20px;
    float: left; /* Align bot messages to the right */
    /*margin-top: 90px;*/
    width: 85px;
    justify-content: space-around;
    display: flex;
}

.hidden {
    display: none;
}

.jump1,
.jump2,
.jump3,
.jump4,
.jump5 {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: grey;
}

.jump1 {
    margin-top: 5px;
    animation: typin 1.5s linear infinite;
    animation-delay: 01.1s;
}

.jump2 {
    margin-top: 5px;
    animation: typin 1.5s linear infinite;
    animation-delay: 01.2s;
}

.jump3 {
    margin-top: 5px;
    animation: typin 1.5s linear infinite;
    animation-delay: 01.3s;
}

.jump4 {
    margin-top: 5px;
    animation: typin 1.5s linear infinite;
    animation-delay: 01.4s;
}

.jump5 {
    margin-top: 5px;
    animation: typin 1.5s linear infinite;
    animation-delay: 1.5s;
}

@keyframes typin {
    0% {
        transform: translateY(0px);
    }

    25% {
        transform: translateY(0px);
    }

    35% {
        transform: translateY(8px);
    }

    45% {
        transform: translateY(0px);
    }

    60% {
        transform: translateY(-8px);
    }

    75% {
        background-color: white;
        transform: translateY(0px);
    }

    100% {
        transform: translateY(0px);
    }
}