/* Custom styles for Reason Tutor chat application */

:root {
    --blue: #0582ff;
    --green: #03d000;
    --black: #000000;
    --red: #ff3646;
    --gray-light: rgb(197, 197, 197);
    --white: #ffffff;
}

html,
base {
    font-family: "Inter", sans-serif;
    font-size: 20px;
    padding: 20px;
}

.btn,
button {
    border: none;
    border-radius: 8px;
    background-color: var(--blue);
    color: var(--white);
    padding: 10px 30px;
    text-decoration: none;

    &:hover {
        cursor: pointer;
        opacity: 0.8;
    }
}

a {
    color: var(--black);
}

.bot-message {
    a {
        color: var(--blue);
    }
}


header {
    h2 {
        span {
            white-space: nowrap;
        }
        a {
            text-decoration: none;
        }
    }
    nav {
        ol {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 20px;
    
            li {
                list-style-type: none;
                white-space: nowrap;                         
            }
            margin-bottom: 40px;
            padding-left: 0;

            @media (max-width: 768px) {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    
    }
    
}

hr {
    border: 0.5px solid var(--gray-light);
}


body {
    display: flex;
    justify-content: center;
    .layout-container {
        width: 100vw;
        max-width: 1000px;
        margin-left: 10px;
        margin-right: 10px;
    }
}

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

.chat-container {
    .htmx-request .htmx-indicator {
        display: block;
    }

    .htmx-request form {
        display: none;
    }

    .spinner {
        display: inline-block;
        animation-name: spin;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }

    margin-bottom: 100px;

    .message {
        margin-bottom: 20px;
    }
    .bot-message {
        margin-bottom: 40px;
    }

    .initial-instructions {
        margin-top: 30px;
        margin-bottom: 10px;
    }
}

.chat-history-container {
    ul {
        list-style-type: none;
        padding-left: 0;

        li {
            margin-bottom: 30px;
        }

        .chat-preview {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        hr {
            margin-top: 20px;
        }
    }
}

.index-container {
    .select-proficiency-container {
        margin-top: 40px;
    }
    .select-proficiency {
        margin-bottom: 30px;
    }
}

.layout-container {
    img.logo {
        display: inline-block;
        height: 30px;
        margin-bottom: -5px;
        margin-right: -10px;
    }
}