.window {
    position: absolute;
    background-color: rgb(8, 49, 217);
    border: solid 2px #012e7e;
    border-radius: 12px 12px 2px 2px;
    padding: 2px;
    overflow: hidden;

    * {
        text-decoration: none;
        list-style: none;
        border: none;
        padding: 0;
        margin: 0;
        font-family: "IBM Plex Mono", monospace;
        font-weight: 400;
        font-size: 13px;
        user-select: none;
        outline: none;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: linear-gradient(rgb(0, 88, 238) 0%, rgb(53, 147, 255) 4%, rgb(40, 142, 255) 6%, rgb(18, 125, 255) 8%, rgb(3, 111, 252) 10%, rgb(2, 98, 238) 14%, rgb(0, 87, 229) 20%, rgb(0, 84, 227) 24%, rgb(0, 85, 235) 56%, rgb(0, 91, 245) 66%, rgb(2, 106, 254) 76%, rgb(0, 98, 239) 86%, rgb(0, 82, 214) 92%, rgb(0, 64, 171) 94%, rgb(0, 48, 146) 100%);
        margin: -4px -4px 0 -4px;
        padding: 8px;

        .title > * {
            display: inline-block;
            vertical-align: text-bottom;
        }
        .title img {
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }

        h3 {
            color: white;
            text-shadow: rgb(0, 0, 0) 1px 1px;
            font-weight: 700;
            font-size: 16px;
            letter-spacing: 0;
        }

        .actions {
            font-size: 0;

            li {
                display: inline-block;
            }
            li:not(:last-child) {
                margin-right: 8px;
            }
            li:hover {
                filter: brightness(1.2);
            }

            img {
                image-rendering: pixelated;
                image-rendering: crisp-edges;
                display: block;
            }
        }
    }

    .content {
        background-color: #ece9d8;
        display: flex;
        flex-direction: column;
        border: solid 2px #012e7e;
    }

    button {
        margin: 4px;
        padding: 4px;
        border-top: 2px solid #ffffff;
        border-left: 2px solid #ffffff;
        border-bottom: 2px solid #716f64;
        border-right: 2px solid #716f64;
    }
    button:active {
        border-top-color: #716f64;
        border-left-color: #716f64;
        border-bottom-color: #ece9d8;
        border-right-color: #ece9d8;
    }
}


/* TERMINAL */

.window.terminal {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;

    .content {
        .menu {
            font-size: 0;
            margin: 2px;

            li {
                display: inline-block;
                padding: .4rem;
                position: relative;

                .elements {
                    display: none;
                    position: absolute;
                    bottom: 0;
                    left: -1.5;
                    transform: translateY(calc(100% + 2px));
                    z-index: 10;
                    background-color: white;
                    border: solid 1.5px #aca899;
                    padding: 2px 0;
                    filter: drop-shadow(4px 4px 2px rgba(0 0 0 / 50%));

                    > li {
                        color: black;
                        text-wrap: nowrap;
                        padding: 6px;
                        margin: 0 2px;
                        width: calc(100% - 4px);
                    }

                    .sep {
                        height: 1.5px;
                        width: 100%;
                        margin: 2px 0;
                        background-color: #dcd7c6;
                    }
                }
            }
        }

        .menu li:hover {
            /* background-color: rgba(0 0 0 / 10%); */
            background-color: #0055e5;
            color: white !important;
        }
        .menu > li.active {
            background-color: #0055e5;
            color: white;
            position: relative;

            .elements {
                display: block;
            }
        }

        .viewer {
            padding: 6px;
            border: solid 1px #716f64;
            outline: solid 1px #aca899;
            margin: 1px;
        }

        form#chatbot  {
            background-color: #F4F3F0;
            height: 220px;
            border: solid 1px black;
            outline: solid 2px white;
            outline-offset: 2px;
            box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3);
            padding: 6px;
            overflow-y: auto;
            position: relative;

            .loader {
                display: none;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                p, img {
                    display: inline-block;
                    vertical-align: middle;
                }

                img {
                    animation: spinner 1s steps(8) infinite;
                }
            }

            ul.messages {
                > li strong {
                    display: inline-block;
                    background-color: #ece9d8;
                    padding: 0px 2px;
                    border: solid 1px #aca899;
                    border-radius: 2px;
                }
                > li strong:hover {
                    text-decoration: underline;
                }

                > li.error {
                    color: red;
                }
            }
            
            .query {
                display: flex;
                gap: 2px;

                input#prompt {
                    width: 100%;
                    background-color: #F4F3F0;
                }
            }
        }

        form#chatbot.waking {
            > * {
                display: none;
            }

            .loader {
                display: block;
            }
        }
    }
}

.window.terminal.minimized {
    top: 0 !important;
    left: 50% !important;
    transform: translate(-50%, calc(100vh - 40px));
    width: 40%;

    .content {
        display: none;
    }
}

.window.terminal.maximized {
    width: 95vw;
    left: 50% !important;
    top: 5% !important;

    .viewer form#chatbot {
        height: calc(95vh - 90px);
    }
}


/* DOCUMENTS */

.window.documents {
    table.files {
        margin: 4px;
        background-color: #F4F3F0;
        border-collapse: collapse;
    }

    table.files th,
    table.files td {
        border: 1px solid #aca899; 
        padding: 0 8px;
    }

    table.files th {
        font-weight: 700;
    }

    button {
        margin-top: 0;
    }
}

/* PROJECTION */

.window.projection {
    .content {
        height: 250px;
        width: 250px;
        overflow: hidden;
    }

    #projection-plot {
        .modebar-container {
            display: none
        }

        .svg-container {
            transform-origin: top left;
            image-rendering: pixelated;
            transform: scale(4);
        }

        .infolayer {
            transform: scale(0.25);
            transform-origin: top right;
        }

        .legendpoints .scatterpts {
            transform: scale(4) translateX(6px);
            stroke-width: .3px !important;
        }
    }
}



@keyframes spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}