/* MAIN */

:root {
    --main-text: #333;
    --code-font: "Courier New", Courier, monospace;
    --user-dark: #450597;
    --user-border: #45059769;
    --user-light: #f0eaf6;
    --bot-dark: #2a836d;
    --bot-border: #2a836d69;
    --message-bg: #f5f2f2;
}

/* part of the main site template */
#wrap {
    padding-bottom: 0;
}

#center-container {
    height: 100%;
    display: flex;
    flex-flow: column;
}

#main-container {
    padding-bottom: 16px;
    flex: 1 1 auto;
    overflow: auto;
}


/* MESSAGES */

.message {
    display: flex;
    border-radius: 16px;
    padding: 8px 16px;
    gap: 16px;
    margin-top: 16px;
    overflow-wrap: anywhere;
}

.message .message-main {
    flex: 1 1 auto;
}

.message .message-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    margin: 4px 0;
}

.message .message-content {
    margin: 0;
}

.message-user {
    border: 1px solid var(--user-border);
    border-bottom-right-radius: 0;
    margin-top: 32px;
}

.message-user .message-icon {
    border: 1px solid var(--user-dark);
    background-color: var(--user-light);
}

.message-user .message-icon i {
    color: var(--user-dark);
}

.message-bot {
    border-bottom-left-radius: 0;
    border: 1px solid var(--bot-border);
}

.message-bot .message-icon {
    background-color: var(--bot-dark);
}

.message-bot .message-icon i {
    color: white;
}

.message-system {
    background-color: #fff8a8;
}

.message-system .message-icon {
    background-color: #7f832a;
}

.message-system .message-icon i {
    color: white;
}


/* MARKDOWN */

.message * {
    color: var(--main-text);
    line-height: 1.5;
}

.message p {
	font-size: 12pt;
    margin: 8px 0;
}

.message h1, .message h2 {
    /* i've never actually seen an h1 or h2, but this seems about right*/
    font-size: 14pt;
}

.message h3 {
    font-size: 13pt;
}

.message a {
    color: #4169e1;
}

.message a:hover {
    color: #3b60cd;
}

.message pre {
    white-space: pre-wrap;
}

.message code {
    font-family: var(--code-font);
}

.message hr {
    display: none;
}

.message table {
    border-collapse: collapse;
}

.message th, .message td {
    border: 1px solid var(--main-text);
    padding: 4px 16px;
}


/* HEADER */

#chat-header {
    display: flex;
    justify-content: space-between;
}

#chat-header h1 i {
    color: #2a836d;
}

#chat-caption {
    display: none;
    border-top: 1px solid gray;
    padding: 8px 0;
    margin-top: 8px;
}

#chat-caption.visible {
    display: block;
}


/* FOOTER */

#chat-footer {
    flex: 0 1 auto;
    padding: 16px 24px;
    background-color: var(--user-light);
    position: sticky;
    bottom: 0;
}

#user-input-container {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid var(--user-border);
    border-radius: 4px;
    transition: border .1s linear;
    background-color: white;
}

#user-input-container:focus-within {
    border: 1px solid #555;
}

#user-input-container:has(textarea:read-only) {
    background-color: var(--message-bg);
}

#user-input {
    flex: 1 1 auto;
    padding: 8px 12px;
    margin: 2px 0;
    overflow: hidden;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    outline: none;
    resize: none;
    min-height: 38px;
}

#user-input-icon {
    color: var(--user-dark);
    margin-left: 12px;
}

#user-input-container button {
    margin-right: 2px;
}

#send-button {
    background-color: var(--user-dark);
    color: var(--user-light);
}

#send-button:hover {
    background-color: #450597c5;
}

#send-button:active {
    background-color: #450597d5;
}

#send-button :first-child {
    transform: translateX(1px);
}

#microphone-button :nth-child(2) {
    display: none;
    color: #126828;
}

#microphone-button.active :nth-child(2) {
    display: inline-block;
}

#microphone-button.active :first-child {
    display: none;
}

#chat-action-buttons {
    display: flex;
    gap: 16px;
    margin: 10px 0 0 auto;
}


/* UI KIT BUTTONS */

.button-floating {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #45059710;
    border-radius: 18px;
    border-style: none;
    box-sizing: border-box;
    color: var(--user-dark);
    cursor: pointer;
    margin: 0;
    padding: 0 12px;
    outline: none;
    text-decoration: none;
    font-weight: bold;
    transition: background-color .1s linear;
}

.button-floating.hidden {
    display: none;
}

.button-floating:hover {
    background-color: #45059725;
}

.button-floating:active {
    background-color: #45059735;
}

.button-floating:focus {
    outline: none;
}

.button-icon {
	font-size: 20px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    padding: 6px 7px;
    min-height: 38px;
    background-color: transparent;
    color: var(--main-text);
    border: none;
    transition: color .1s linear, border .1s linear;
}

.button-icon i {
    color: inherit;
}

.button-icon.hidden {
    display: none;
}

.button-icon:hover {
    color: var(--bot-dark);
}

.button-icon:active {
    background-color: #2a836d10;
}

.button-icon:focus {
    outline: none;
}

.button-icon:disabled {
    color: #ccc;
    background-color: transparent;
    cursor: default;
}

.button-message {
    border-radius: 8px;
    margin: 0 4px;
    padding: 6px 12px;
    min-height: 38px;
    background-color: var(--message-bg);
    color: var(--main-text);
    border: 1px solid var(--main-text);
    cursor: pointer;
    transition: color .1s linear, border .1s linear;
}

.button-message:hover {
    color: var(--bot-dark);
    border: 1px solid var(--bot-dark);
}

.button-message:disabled {
    color: #ccc;
    border: 1px solid #ccc;
    cursor: default;
}

.button-link {
    border: none;
    outline: none;
    cursor: pointer;
    padding: 8px 0;
    background: none;
    color: #4169e1;
    transition: color .1s linear;
}

.button-link.hidden {
    display: none;
}

.button-link:hover {
    color: #3b60cd;
}

.button-link:focus {
    outline: none;
}

.button-link:disabled {
    color: #ccc;
    cursor: default;
}


/* UI KIT DETAILS AND SUMMARY */

.details-message {
    border-radius: 8px;
    margin: 4px 2px;
    background-color: var(--message-bg);
    color: var(--main-text);
    border: 1px solid var(--main-text);
    transition: color .1s linear, border .1s linear;
}

.details-message:has(summary:hover) {
    color: var(--bot-dark);
    border: 1px solid var(--bot-dark);
}

.details-message:has(summary:active) {
    background-color: #2a836d10;
}

.details-message summary {
    padding: 8px;
    cursor: pointer;
    user-select: none;
    color: inherit;
}

.details-message .details-content {
    padding: 0 24px;
}


/* UI KIT SPINNERS */

/* https://cssloaders.github.io/ */
/* https://tobiasahlin.com/spinkit/ */

.spinner-bot {
    transform: rotateZ(45deg);
    perspective: 1000px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: var(--main-text);
}

.spinner-bot::before, .spinner-bot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    transform: rotateX(70deg);
    animation: 1s spinner-bot linear infinite;
}

.spinner-bot::after {
    color: var(--bot-dark);
    transform: rotateY(70deg);
    animation-delay: -0.6s; /* negative so it doesn't have a delayed apperance*/
}

@keyframes spinner-bot {
    0%, 100% {
        box-shadow: .2em 0px 0 0px currentcolor;
    }
    12% {
        box-shadow: .2em .2em 0 0 currentcolor;
    }
    25% {
        box-shadow: 0 .2em 0 0px currentcolor;
    }
    37% {
        box-shadow: -.2em .2em 0 0 currentcolor;
    }
    50% {
        box-shadow: -.2em 0 0 0 currentcolor;
    }
    62% {
        box-shadow: -.2em -.2em 0 0 currentcolor;
    }
    75% {
        box-shadow: 0px -.2em 0 0 currentcolor;
    }
    87% {
        box-shadow: .2em -.2em 0 0 currentcolor;
    }
}

.loader-bot-buttons {
    width: 100%;
    height: 3px;
    position: relative;
    overflow: hidden;
    opacity: 0;
}

.loader-bot-buttons.visible {
    opacity: 1;
}

.loader-bot-buttons::after {
    content: '';
    width: 200px;
    height: 100%;
    background-color: var(--bot-dark);
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    animation: loader-bot-buttons 1.8s linear infinite;
}
  
@keyframes loader-bot-buttons {
    0% {
        left: 0;
        transform: translateX(-100%);
    }
    100% {
        left: 100%;
        transform: translateX(0%);
    }
}


/* BOT-SPECIFIC MESSAGES (being low in stylesheet gives high priority) */

.message-main i {
    margin: 0 4px;
}

.message-main i.fa-book-bible {
    color: #c4122e;
}

.message-main i.fa-feather-pointed {
    color: #6c3a2a;
}

.message-main i.fa-sun {
    color: #ffc107;
}

.details-message {
    display: none;
    margin-top: 12px;
    scroll-margin-top: 16px;
}

.details-message.visible {
    display: block;
}

.even-more-sources-button {
    margin-left: 24px;
}

.bot-buttons {
    display: none;
    margin-top: 12px;
    align-items: center;
}

.bot-buttons.visible {
    display: flex;
}

.find-more-sources-container {
    display: flex;
    align-items: center;
}

.find-more-sources-buttons {
    display: flex;
}

.bot-buttons .button-message, .find-more-sources-label {
    display: none;
}

.bot-buttons .button-message.visible, .find-more-sources-label.visible {
    display: block;
}

.find-more-sources-label {
    font-weight: bold;
    margin-right: 6px;
}

.read-aloud-stop-button {
    display: none;
    margin-left: auto;
}

.read-aloud-stop-button.visible {
    display: inline-block;
}

.read-aloud-stop-button:not(.visible) + .read-aloud-start-button {
    margin-left: auto;
}

.read-aloud-start-button :nth-child(2), .read-aloud-start-button :nth-child(3) {
    display: none;
}

.read-aloud-start-button.pause :nth-child(2) {
    display: inline-block;
}

.read-aloud-start-button.pause :first-child, .read-aloud-start-button.pause :nth-child(3) {
    display: none;
}

.read-aloud-start-button.loading :nth-child(3) {
    display: inline-block;
}

.read-aloud-start-button.loading :first-child, .read-aloud-start-button.loading :nth-child(2) {
    display: none;
}


/* MEDIA QUERIES */

@media (max-width: 767px) {
    #chat-footer {
        padding: 8px 12px; /* halved */
    }

    .message {
        display: block;
    }

    .message .message-icon {
        float: left;
        width: 28px;
        height: auto;
        background: none;
        border: none;
        margin: 8px 0 0 0;
        justify-content: start;
    }

    .message-bot .message-icon i {
        color: var(--bot-dark);
    }

    .message-bot:has(.spinner-bot) .message-icon {
        display: none;
    }

    .find-more-sources-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .find-more-sources-label {
        margin-right: 0;
        margin-bottom: 6px;
    }

    .container {
        padding-right: 8px;
        padding-left: 8px;
    }
}