/* Google Fonts: Inter, Noto Sans Mono, Source Sans */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+Mono:wght@100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Zen+Dots&display=swap');

/* Bootstrap icons */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

* {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f100;
    font-display: block;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: #00000000;
    border-radius: 5px;
}

*::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #555;
}

*::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

*::-webkit-scrollbar-button {
    display: none;
}

* {
    /* Crazy huh */
    /* transition: all 500ms cubic-bezier(.1, .2, 0, .98); */
    font-family: "Inter", sans-serif;
}

body,
html {
    height: 100%;
}

.flex-horiz {
    flex-direction: row;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.text-center {
    text-align: center;
}

.margin-auto {
    margin: auto;
}

.padding-10 {
    padding: 10px;
}

.bg-light {
    background-color: #f8f9fa;
}

.text-bold {
    font-weight: bold;
}

.border-rounded {
    border-radius: 5px;
}

.hidden {
    display: none;
}

.option-input-row {
    display: flex;
    flex-direction: row;
}

.panel-container {
    margin: 1em;
    margin-left: 2em;
    margin-right: 2em;
    margin-top: 1.4em;
}


.left-panel {
    position: sticky;
    top: 1.5em;

    /* Total screen height - top - Bootstrap mb-3 class (value 16px) */
    height: calc(100vh - 1.5em - 16px);

    overflow-y: auto;
    overflow-x: visible;
}

.right-panel {
    flex: 2;
}

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

.with-gap-2em {
    gap: 2em;
}

.col-md-6 {
    flex: 1;
}

.q-question-h3 {
    margin-right: 0.8em;
}

.q-options {
    display: flex;
    flex-direction: column;
}

.quiz-container {
    margin-bottom: 1em;
}

.nothing-here {
    width: 100%;
    text-align: center;
}

.nothing-here-icon {
    margin-bottom: 1em;
}

.your-questions-body {
    height: 100%;
}

.full-height {
    height: 100%;
}

.scroll-top-btn {
    position: fixed;
    left: 50%;
    bottom: 2em;
    transform: translateX(-50%);
    z-index: 1000;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 1.5em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    transition: opacity 0.3s, transform 0.3s;
}

.scroll-top-btn:hover {
    opacity: 1;
}

.fade-in {
    opacity: 0.9;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}

.fade-out {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(0.8);
}

.scroll-top-btn.hidden {
    display: none;
}

.bi {
    scale: 1.5;
}

.navbar-brand {
    font-family: "Zen Dots", sans-serif;
}

.footer {
    width: 100%;
    text-align: center;
}

.card {
    /* box-shadow: 4px 6px 14px -2px #00000031; */
}

#gemini-prompt-modal.modal.fade .modal-dialog {
    transform-origin: -20vw 12vh;
    transform: scale(0.6);
    transition: transform 0.4s cubic-bezier(.08, .57, .17, 1), opacity 0.3s cubic-bezier(.08, .57, .17, 1);
}

#gemini-prompt-modal.modal.show .modal-dialog {
    transform: none;
}

#gemini-prompt-modal.modal.fade {
    transition: opacity 0.1s cubic-bezier(.08, .57, .46, .99);
}

#settings-modal.modal.fade .modal-dialog {
    transform-origin: calc(100vw - 10px) 10px;
    transform: scale(0.6);
    transition: transform 0.4s cubic-bezier(.08, .57, .17, 1), opacity 0.3s cubic-bezier(.08, .57, .17, 1);
}

#settings-modal.modal.show .modal-dialog {
    transform: none;
}

#settings-modal.modal.fade {
    transition: opacity 0.1s cubic-bezier(.08, .57, .46, .99);
}

.shimmer {
    background: linear-gradient(-45deg, #eeeeee00 40%, #8dc4ff95 50%, #eeeeee00 60%);
    background-size: 500%;
    background-position-x: 100%;
    animation: shimmer 4s infinite cubic-bezier(.08, .57, .17, 1) both;
}

.btn.dropdown-toggle.d-flex .bi {
  font-size: 0.7rem;
}

code#genai-model-name {
    font-family: "Noto Sans Mono", "Consolas", monospace;
    font-size: 0.8rem;
}

@keyframes shimmer {
    to {
        background-position-x: 0;
    }
}

@media (min-width: 769px) {
    .scroll-top-btn {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .panel-container {
        flex-direction: column;
        gap: 1em;
    }

    .left-panel,
    .right-panel {
        width: 100%;
        max-width: 100%;
    }

    .left-panel {
        position: initial;
        height: fit-content;
        padding-right: 0px;
    }

    body {
        overflow: scroll;
    }

    #gemini-prompt-modal.modal.fade .modal-dialog {
        transform-origin: calc(100vw - 10vw) 12vh;
        transform: scale(0.6);
        transition: transform 0.4s cubic-bezier(.08, .57, .17, 1), opacity 0.3s cubic-bezier(.08, .57, .17, 1);
    }

    #gemini-prompt-modal.modal.show .modal-dialog {
        transform: none;
    }

    #gemini-prompt-modal.modal.fade {
        transition: opacity 0.1s cubic-bezier(.08, .57, .46, .99);
    }

    #settings-modal.modal.fade .modal-dialog {
        transform-origin: calc(100vw - 20vw) calc(100vh - 10vh);
        transform: scale(0.6);
        transition: transform 0.4s cubic-bezier(.08, .57, .17, 1), opacity 0.3s cubic-bezier(.08, .57, .17, 1);
    }

    #settings-modal.modal.show .modal-dialog {
        transform: none;
    }

    #settings-modal.modal.fade {
        transition: opacity 0.1s cubic-bezier(.08, .57, .46, .99);
    }

    .submit-row>button {
        flex: 1;
        font-size: 1.6em;
    }

    .dropdown.border-end {
        border: none !important;
    }
}