:root {
    --dark-text: #333;
    --light-text: #fff;
    --panel-heading-background: #808;
    --input-background: #093;
    --human-message-background: #efe;
    --general-background: #eee;
    --computer-message-background: #fff;
    --panel-body-background: #fff;
    --button-shadow: #0006;
    --focus-shadow: #f60;
    --separator-shadow: #0003;
    --disabled-background: #333;
    --disabled-foreground: #fff;
    --covered-background: #ffb;
    --notcovered-background: #fff;
    --inserted-background: #dfd;
    --deleted-background: #fdd;
    --new-background: #ddf;
    --old-background: #fff;
    --levelnumbers-background: #449;
    --levelnumbers-foreground: #ccc;
}

* {
    box-sizing: border-box;
    outline: none !important;
}

a { /* markdown: [text](url) */
    border-radius: 0.25rem;
    color: inherit;
    padding: 0.1rem 0;
    white-space: nowrap;
}

body {
    background-color: var(--general-background);
    color: var(--dark-text);
    font-family: monospace;
    line-height: 1.25rem;
    margin: 0;
}

button {
    background-color: var(--input-background);
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem var(--button-shadow);
    color: var(--light-text);
    font-family: inherit;
    font-size: inherit;
    line-height: 1.5rem;
    margin: 0.75rem 0;
    padding: 0.5rem 0.75rem;
    width: 100%;
}

b { /* markdown: **bold** */
    background-color: var(--emphasis-background);
    color: var(--dark-text);
    font-weight: normal;
    padding: 0.15rem 0;
}

code {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: pre;

    div {
        &.covered {
            background-color: var(--covered-background);
        }

        &.notcovered {
            background-color: var(--notcovered-background);
        }

        &.old {
            background-color: var(--old-background);
        }

        &.new {
            background-color: var(--new-background);
        }

        ins {
            background-color: var(--inserted-background);
            text-decoration: none;
        }

        del {
            background-color: var(--deleted-background);
            text-decoration: none;
        }

        .keyword {
            color: #c33;
        }

        .class, .function {
            color: #66c;
        }

        .variable {
            color: #060;
        }

        .literal, .number, .operator {
            color: #06c;
        }

        .string, .regexp {
            color: #036;
        }

        .bullet {
            color: #660;
        }
    }
}

form {
    span {
        display: block;
    }
}

i { /* markdown: *italic* */
    background-color: var(--panel-heading-background);
    border-radius: 0.25rem 0.25rem 0 0;
    color: var(--light-text);
    font-style: normal;
    padding: 0.1rem 0.25rem;
    white-space: nowrap;
}

input {
    &[type="text"], &[type="number"] {
        background-color: var(--input-background);
        border: none;
        border-radius: 0.5rem;
        color: var(--light-text);
        font-family: inherit;
        font-size: inherit;
        height: 2rem;
        padding: 0 0.5rem;
        width: 8rem;
    }

    &[type="radio"] {
        margin: 0 0.5rem 0 0.75rem;
    }

    &[type="submit"] {
        background-color: var(--input-background);
        border: none;
        border-radius: 0.5rem;
        box-shadow: 0 0.25rem 0.5rem var(--button-shadow);
        color: var(--light-text);
        display: block;
        font-family: inherit;
        font-size: inherit;
        line-height: 1.5rem;
        margin: 0.75rem 0;
        padding: 0.5rem 0.75rem;
        white-space: inherit;
        width: 100%;
    }
}

label {
    border-radius: 0.5rem;
    height: 2rem;

    &:has(input[type="radio"]) {
        background-color: var(--input-background);
        color: var(--light-text);
        display: inline-block;
        line-height: 2rem;
        margin-right: 0.75rem;
        opacity: 0.25;
        padding-right: 0.75rem;

        &:has(input:disabled) {
            background-color: var(--disabled-background);
            color: var(--disabled-foreground);
        }

        &:has(input:checked) {
            opacity: 1;
        }

        &:hover {
            cursor: pointer;
        }
    }
}

p {
    margin: 0.75rem 0;
    white-space: pre-wrap;
}

pre {
    margin: 0;
}

a, button, input, label:has(input[type="radio"]:not(:disabled)) {
    &:focus-within, &:focus, &:not(:disabled):hover, &:not(:disabled):has(:focus) {
        box-shadow: 0 0 0.3rem 0.3rem var(--focus-shadow);
        opacity: 1;
    }
}

:disabled {
    background-color: var(--disabled-background) !important;
    color: var(--disabled-foreground) !important;

    &:is(button), &:is(input[type="submit"]), &.empty {
        opacity: 0.25;
    }
}

#screen {
    display: flex;

    #conversation {
        box-shadow: 0.25rem 0 0.5rem var(--separator-shadow);
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow-y: scroll;
        scrollbar-width: none;
        width: 60%;

        #messages {
            padding-bottom: 2rem;
        }

        section {
            position: relative;
            opacity: 0;

            > div {
                border-radius: 1.25rem;
                color: var(--dark-text);
                display: flow-root;
                margin: 0.75rem;
                overflow: hidden;
                padding: 0 0.75rem;

                code {
                    margin-bottom: 0.75rem;
                    margin-top: 0.75rem;
                }
            }

            &:before {
                content: '';
                background-size: contain;
                display: block;
                height: 1.5rem;
                width: 1.5rem;
                position: absolute;
                bottom: 0;
            }

            &.human {
                margin-left: 20%;

                &:before {
                    background-image: url('avatar-human.png');
                    right: 0.5rem;
                }

                &.reveal {
                    animation: revealHuman 0.25s linear forwards;
                }

                > div {
                    background-color: var(--human-message-background);
                    border-bottom-right-radius: 0;
                    color: var(--dark-text);
                    margin-right: 2.5rem;
                }
            }

            &.computer {
                margin-right: 20%;

                &:before {
                    background-image: url('avatar-computer.png');
                    left: 0.5rem;
                }

                &.reveal {
                    animation: revealComputer 0.25s linear forwards;
                }

                > div {
                    background-color: var(--computer-message-background);
                    border-bottom-left-radius: 0;
                    color: var(--dark-text);
                    margin-left: 2.5rem;
                }
            }
        }
    }

    #sidebar {
        width: 40%;

        section {
            background-color: var(--panel-body-background);
            border-radius: 0.5rem;
            color: var(--dark-text);
            margin: 0.75rem;
            overflow: hidden;

            header {
                background-color: var(--panel-heading-background);
                border-radius: 0.5rem 0.5rem 0 0;
                color: var(--light-text);
                padding: 0.75rem;
            }

            > div {
                display: flow-root;

                code {
                    margin: 0.75rem;
                }

                ol {
                    list-style-type: none;
                    margin: 0.75rem;
                    padding: 0;

                    li {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: pre;

                        code {
                            margin: 0;
                        }
                    }
                }
                
                p {
                    margin: 0.75rem;
                }

                .levelnumbers {
                    display: inline-flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    margin: 0.75rem;
                    overflow: hidden;

                    div {
                        display: flex;
                        flex: 1;
                        flex-direction: row;

                        .cell {
                            display: inline-block;
                            flex: 1;
                            line-height: 2rem;
                            text-align: center;
                            white-space: nowrap;

                            .number {
                                display: inline-block;
                                text-align: center;
                                width: 1rem;
                            }

                            .emoji {
                                font-size: 1.75rem;
                            }
                        }
                    }
                }
            }
        }
    }
}

.or {
    overflow: hidden;
    text-align: center;

    &:before, &:after {
        content: "";
        border-bottom: 1px solid var(--dark-text);
        display: inline-block;
        height: 0;
        position: relative;
        vertical-align: middle;
        width: 50%;
    }

    &:before {
        right: 1rem;
        margin-left: -50%;
    }

    &:after {
        left: 1rem;
        margin-right: -50%;
    }
}

.checking {
    animation: pulseOpacity 0.5s infinite alternate;
}

@keyframes pulseOpacity {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes revealComputer {
    from {
        transform: translateY(-100%) rotateX(90deg);
        opacity: 0;
    }
    to {
        transform: translateY(0) rotateX(0deg);
        opacity: 1;
    }
}

@keyframes revealHuman {
    from {
        transform: translateY(-100%) rotateX(90deg);
        opacity: 0;
    }
    to {
        transform: translateY(0) rotateX(0deg);
        opacity: 1;
    }
}