:root {
    --body-bg: #ffffff;
    --body-text: black;
    --messages-bg: #f1f1f1;
    --recipient-bubble-bg: #e5e5ea;
    --recipient-bubble-text: #666;
    --recipient-bubble-main-text: black;
    --sender-bubble-bg: #007aff;
    --sender-bubble-text: white;
    --read-receipt-accent: #007aff;
    --dialog-bg: #ffffff;
    --dialog-border: #cccccc;
    --input-bg: #f1f1f1;
    --input-border: #cccccc;
    --button-hover-bg: #e0e0e0;
}

body.dark {
    --body-bg: #1e1e1e;
    --body-text: #f1f1f1;
    --messages-bg: #1e1e1e;
    --recipient-bubble-bg: #3e3e3e;
    --recipient-bubble-text: #cccccc;
    --recipient-bubble-main-text: #f1f1f1;
    --sender-bubble-bg: #007aff;
    --sender-bubble-text: white;
    --read-receipt-accent: #007aff;
    --dialog-bg: #252526;
    --dialog-border: #3e3e3e;
    --input-bg: #3e3e3e;
    --input-border: #555555;
    --button-hover-bg: #555555;
}

* {
    box-sizing: border-box;
}

#messages {
    background-color: var(--messages-bg);
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    padding: 0 10px 5px 10px;
    margin-bottom: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

dialog {
    background-color: var(--dialog-bg);
    color: var(--body-text);
    border: 1px solid var(--dialog-border);
}

dialog::backdrop {
    backdrop-filter: blur(5px);
}

#chatForm {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    flex-shrink: 0;
}

#uploads {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    margin: 0;
}

#uploads #recordAudio {
    white-space: nowrap;
}

#chatForm #message {
    flex-grow: 1;
    resize: none;
    max-height: 20vh;
    margin: 0;
}

#message {
    background-color: var(--input-bg);
    color: var(--body-text);
    border: 1px solid var(--input-border);
    font-family: "National Park", sans-serif;
    font-weight: 600;
    border-radius: 10px;
}

label {
    font-family: "National Park", sans-serif;
    font-weight: 600;
}


*:disabled {
    background-color: darkgrey !important;
}

body.crazy {

    h1,
    h2,
    h3 {
        font-family: "Bungee Spice";
    }

    input[type="text"],
    input[type="submit"],
    input[type="file"]::file-selector-button,
    button,
    label,
    #message {
        font-family: "Nabla", sans-serif;
    }

    .messageContent {
        font-family: "Monoton", sans-serif;
        font-size: 1em;
        line-height: 1;
    }

    .messageDate {
        font-family: "Monofett", sans-serif;
        font-size: 1em;
    }
}

.message {
    display: flex;
    flex-direction: column;
    width: fit-content;
    max-width: 75%;
    margin-bottom: 15px;
    transition-duration: 0.25s;
    user-select: none;
}

#messages>.message:first-child {
    margin-top: auto;
}

.message:has(.me) {
    margin-left: auto;
}

.message:has(.me) .messageDate {
    text-align: right;
}

.messageAlign {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: 10px 10px 0 0;
    padding: 8px 12px 0px 12px;
}

.metadata {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-radius: 0 0 10px 10px;
    padding: 0px 12px 8px 12px;
    gap: 8px;
}

.message:not(:has(.me)) .metadata {
    justify-content: flex-start;
}

.message:not(:has(.me)) .messageAlign,
.message:not(:has(.me)) .metadata {
    background-color: var(--recipient-bubble-bg);
}

.message:has(.me) .messageAlign,
.message:has(.me) .metadata {
    background-color: var(--sender-bubble-bg);
}

.messageContent {
    word-break: break-word;
    white-space: pre-wrap;
    margin: 0;
    font-family: "Dongle", "Noto Color Emoji", "Inter";
    font-size: 1.5em;
    font-style: normal;
    line-height: 0.6;
}

.messageDate {
    font-size: 0.75em;
    margin: 0;
    font-family: "Carlito", sans-serif;
}

.message:not(:has(.me)) .messageContent {
    color: var(--recipient-bubble-main-text);
}

.message:not(:has(.me)) .messageDate {
    color: var(--recipient-bubble-text);
}

.message:has(.me) .messageContent,
.message:has(.me) .messageDate {
    color: var(--sender-bubble-text);
}

.messageFile {
    margin-top: 4px;
    object-fit: contain;
    max-width: 100%;
    cursor: pointer;
    border-radius: 10px;
    align-self: flex-start;
}

.message:has(.me) .messageFile {
    align-self: flex-end;
}

@media screen and (min-width: 800px) {
    .messageFile {
        max-height: 200px !important;
    }
}

audio {
    background-color: var(--recipient-bubble-bg);
}

#pfp,
#recipientPfp {
    height: 50px;
    width: 50px;
    margin-right: 10px;
    user-select: none;
    object-fit: cover;
    border-radius: 50%;
    vertical-align: middle;
}

#pfp,
.contact,
#addContact {
    margin-left: 10px;
}

#typingIndicator {
    display: flex;
    visibility: hidden;
    color: var(--recipient-bubble-text);
    width: 50px;
    height: 25px;
    background-color: var(--recipient-bubble-bg);
    border-radius: 13px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 10px;
    margin-bottom: 5px;
}

.dot {
    background-color: white;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    margin: 2px;
}

.dot:nth-child(1) {
    animation: 1.16s typing infinite ease-in-out;
}

.dot:nth-child(2) {
    animation: 1.16s typing 0.22s infinite ease-in-out;
}

.dot:nth-child(3) {
    animation: 1.16s typing 0.44s infinite ease-in-out;
}

@keyframes typing {
    0% {
        transform: translateY(0px);
    }

    25% {
        transform: translateY(-3px);
    }

    50% {
        transform: translateY(0px);
    }
}

.receipt {
    position: relative;
    width: 29px;
    height: 17px;
    user-select: none;
}

.receipt div:nth-child(2) {
    left: 10px;
}

.circle {
    box-sizing: content-box;
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.tick {
    color: var(--sender-bubble-text);
    font-family: "M PLUS Rounded 1c", sans-serif;
    text-align: center;
    line-height: 15px;
    font-weight: bold;
}

.sent .circle,
.delivered .circle {
    background-color: var(--sender-bubble-bg);
    border: 1px solid var(--sender-bubble-text);
}

.sent .tick,
.delivered .tick {
    color: var(--sender-bubble-text);
}

.message:not(:has(.me)) .sent .circle,
.message:not(:has(.me)) .delivered .circle {
    background-color: var(--recipient-bubble-bg);
    border: 1px solid var(--recipient-bubble-text);
}

.message:not(:has(.me)) .sent .tick,
.message:not(:has(.me)) .delivered .tick {
    color: var(--recipient-bubble-text);
}

.message:not(:has(.me)) .read .circle {
    background-color: var(--recipient-bubble-text);
    border: 1px solid var(--recipient-bubble-bg);
}

.message:not(:has(.me)) .read .tick {
    color: var(--recipient-bubble-bg);
}

.read .circle {
    background-color: var(--sender-bubble-text) !important;
    border: 1px solid var(--read-receipt-accent);
}

.read .tick {
    color: var(--read-receipt-accent);
}

.sent div:nth-child(2),
#pfpFile,
#delete {
    display: none;
}

#chat {
    opacity: 0;
    max-width: none;
    max-height: none;
    transform: scale(0.9);
    visibility: hidden;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 0.25s;
    width: 100vw;
    height: 100vh;
    padding: 10px;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    top: 0;
}

#chat.opened {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
}

#chatHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    flex-shrink: 0;
    margin: 0;
}

#chatHeader h2,
#chatHeader button {
    margin: 0;
    line-height: 1.2;
}

#chatUser {
    display: inline;
    user-select: none;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#close {
    float: right;
    margin-left: 10px;
}

#inputs {
    flex-shrink: 0;
    margin: 0;
}

#loading {
    height: 50px;
    width: 50px;
    border: 5px solid var(--body-text);
    border-radius: 50%;
    border-right-color: transparent;
    animation: load 1s infinite linear;
    z-index: 100;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

@keyframes load {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

img {
    background-color: var(--recipient-bubble-bg);
}

#error {
    color: red;
}

#sendMessage {
    float: right;
}

#upload {
    width: 175px;
}

#fileDialog {
    text-align: center;
    max-width: 80vw;
    max-height: 80vh;
}

#fileDialogEmbed {
    max-width: 80vw;
    max-height: 70vh;
}

#recording {
    text-align: center;
}

#crazyFonts {
    position: absolute;
    bottom: 0;
    right: 0;
}

body.show-outlines * {
    outline: 1px solid red !important;
}

#contextDialog {
    border: none;
    margin: 0;
    padding: 0;
    margin-left: auto;
    margin-right: 10px;
    overflow: hidden;
    background-color: initial;
    color: initial;
    position: fixed;
    z-index: 98;
}

#contextDialog::backdrop {
    background-color: transparent;
    backdrop-filter: none;
    pointer-events: none;
}

#context {
    background-color: black;
    color: white;
    overflow: hidden;
    user-select: none;
    border-radius: 10px;
    height: fit-content;
    width: fit-content;
}

#context div {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

#context div:hover {
    background-color: #333;
    transform: scale(1.1);
}