/* site */
html {
    ul {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    body {
        font-family: Poppins, Montserrat, Lato, Arial, sans-serif;
        margin: 0;
        padding: 0;
        max-width: 100vw;
        background-color: black;
    }

    overflow-x: hidden;
}

header {
    background-image: linear-gradient(rgb(123, 37, 37), rgba(0, 0, 0, 0));
    color: #fff;
    padding: 0;
    margin: 0;
    position: absolute;
    width: 100%;
    z-index: 100;

    ul {
        display: flex;
        justify-content: space-evenly;
        margin: 0;
        padding: 2em;

        a {
            color: fff;
        }
    }
}

#sidebar {
    background-color: #33333300;
    color: #fff;
    padding: 0;
    margin: 0;
    position: fixed;
    width: 20%;
    top: 20vh;
    height: 90vh;
    display: flex;
    flex-direction: column;

    ul {
        padding: 0;

        li {
            padding: 1em;
            margin: 0;
            border-bottom: 1px solid #585858;

            a {
                color: #fff;
                text-decoration: none;
            }

            > div {
                display: none;
            }
        }

        li {
            a:hover {
                transition: 1s;

                div {
                    animation: show 1.7s;
                    display: block;
                }
            }
        }
    }
}

main {
    background-color: #f4f4f400;
    color: #fff;
    margin: 0;
    position: absolute;
    width: 80%;
    top: 10vh;
    left: 20vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none;

    > div {
        padding: 2%;
        position: absolute;
        width: 96%;
        /* Add explicit width */
        left: 0;
        /* Ensure all divs are positioned at the same left edge */
        opacity: 0;
        /* Start all hidden */
        z-index: 1;
        /* Default z-index */
    }

    /* First div (AI main) should be visible by default */
    > div:first-child {
        opacity: 0.8;
        visibility: visible;
        z-index: 10;
        /* Higher z-index for active div */
    }

    /* Make sure inactive divs are fully hidden */
    div:not(:first-child) {
        visibility: hidden;
        z-index: 1;
    }
}

video {
    position: absolute;
    /* left: -20%; */
    /* top:10; */
    height: 100%;
    z-index: -1;
}

@keyframes show {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* Ensure chat container is visible in projects section */
#projects-main {
    overflow-y: auto;
    padding-bottom: 40px;
    /* visibility: visible !important; Override the default hidden state */
}


/* Make sure chatbot elements are visible when their parent is visible */
#projects-main.visible #chatbot-container,
#projects-main:not([style*="visibility: hidden"]) #chatbot-container {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Make sure chatbot elements are visible when their parent is visible */
#projects-main.visible #chatbot-container,
#projects-main:not([style*="visibility: hidden"]) #chatbot-container {
    visibility: visible !important;
    opacity: 1 !important;
}

#chatbot-container .chat-input,
#chatbot-container .chat-footer,
#chatbot-container #chat-messages {
    visibility: inherit;
    display: flex;
}

.chat-input {
    position: relative;
    z-index: 30;
}

.chat-footer {
    position: relative;
    z-index: 25;
}

/* Ensure chatbot components stay visible */
#chatbot-container.visible,
#projects-main[style*="visibility: visible"] #chatbot-container {
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
}

/* Ensure proper visibility handling for active sections */
main > div[style*="visibility: visible"] {
    z-index: 10 !important;
    /* Active section gets higher z-index */
}

/* Hidden sections should have no participation in layout */
main > div[style*="visibility: hidden"] {
    z-index: 1 !important;
    pointer-events: none;
}