$background-color: #f8f9fa;
$text-color: #333;
$input-background: #fff;
$button-color: #007bff;
$button-hover-color: darken($button-color, 10%);
$shadow-color: rgba(0, 0, 0, 0.075);
$border-radius: 8px;

.chatBox {
    display: flex;
    flex-direction: column;
    width: 100%; /* Adjust the width as needed, could be in percentage */
    height: 100%; /* Adjust the height as needed, could be in percentage */
    background-color: $background-color;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    //margin: 20px auto;
    //overflow: hidden;

    .scroll-box {
        flex-grow: 1;
        overflow-y: scroll;
        overflow-x: hidden;
        height: 100%;
        padding: 10px;
        display: flex;
        flex-direction: column-reverse;
    
        &::-webkit-scrollbar {
          width: 8px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: darken($background-color, 10%);
          border-radius: $border-radius;
        }
    

        .chat-content {
            display: flex;
            flex-direction: column;
        }

        .messages {
            display: flex;
            flex-direction: column;
            .message {
                padding: 10px;
                margin-bottom: 10px;
                border-radius: $border-radius;
                background-color: lighten($background-color, 5%);
                box-shadow: 0 2px 5px $shadow-color;
                //display: flex;
                align-items: center;
                max-width: 70%;
                word-break: break-word;
                .message-footer { // Assuming this is the container for the toggle button
                    //max-width: 70%;
                    
            
                    .toggle-logs-button {
                        margin-top: 10px; // Padding on sides to align with the text above
                        width: 95%;
                        //display: block; // Ensures the button extends the full width of its container
                        text-align: center; // Centers the text inside the button
                        //padding: 8px 0; // Adequate padding for touch targets
                        background-color: $button-color;
                        color: #fff;
                        border: none;
                        border-radius: $border-radius;
                        cursor: pointer;
                        //transition: background-color 0.3s;
                        //margin-top: 10px; // Adds space above the button
                        box-shadow: 0 2px 4px $shadow-color; // Consistent shadow with other elements
                        &:hover {
                            background-color: $button-hover-color;
                        }
                    }
                    .tool-logs {
                        width: 100%;
                        background-color: $input-background;
                        color: $text-color;
                        margin-top: 5px;
                        //padding: 10px;
                        //border-radius: $border-radius;
                        //box-shadow: inset 0 2px 4px $shadow-color;
                        //transition: opacity 1s ease-in-out;
                        font-family: monospace;
                        overflow-x: auto;
                        max-height: 150px; // Ensuring it does not grow too large
                        overflow-y: auto;
                    }
                    
                }   
                
                .custom-link {
                    color: lightblue;
                    text-decoration: underline;
                    cursor: pointer;
                  }
                &.user {
                align-self: flex-end;
                background-color: $button-color;
                color: #fff;
                }
        
                &.chatbot {
                align-self: flex-start;
                background-color: $input-background;
                color: $text-color;
                }
        
                span {
                flex-grow: 1;
                padding-right: 10px;
                }
        
                img {
                max-width: 50px;
                max-height: 50px;
                border-radius: 50%;
                }
            }
        }
        padding-bottom: 0;
    }

    .chat-form {
        display: flex;
        flex-grow: 1;
        //height: 50px;
        bottom: 0;
        width: 100%;
        padding: 10px;
        background-color: $input-background;
        box-shadow: inset 0 -1px 2px $shadow-color;
        
        input[type="text"] {
            flex-grow: 1;
            border: 1px solid darken($input-background, 10%);
            border-radius: $border-radius;
            padding: 8px 12px;
            margin-right: 10px;
        }

        button {
            padding: 8px 16px;
      background-color: $button-color;
      color: #fff;
      border: none;
      border-radius: $border-radius;
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        background-color: $button-hover-color;
      }
        }
        margin-bottom: 0;
    }
}

.initializing-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($background-color, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    color: $text-color;
    z-index: 10; // Ensure it's above all other content (may be better solution)

    &::before {
        content: 'Initializing...';
        font-weight: bold;
    }
}


.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);

    .modal-content {
        background-color: $input-background;
        color: $text-color;
        padding: 20px;
        border-radius: $border-radius;
        box-shadow: 0 2px 10px $shadow-color;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: auto;
        min-width: 300px;

        h4 {
            margin-bottom: 15px;
        }

        p {
            margin-bottom: 20px;
        }

        button {
            padding: 10px 20px;
            background-color: $button-color;
            color: #fff;
            border: none;
            border-radius: $border-radius;
            cursor: pointer;
            margin: 5px;
            transition: background-color 0.3s;

            &:hover {
                background-color: $button-hover-color;
            }
        }
    }
}