* {
    box-sizing: border-box;
}

*:focus-visible {
    outline: 1px solid light-dark(black, #eee);
}

:root {
    --body-bg: light-dark(white, black);
    --body-bg-1: light-dark(#eee, #111);
    --body-text-color: light-dark(black, #ccc);
    scrollbar-color: light-dark(#ddd, #666) transparent;
}

.flashes {
    display: flex;
    flex-direction: column;
    gap: 4px;

    article {
        padding: 12px;
        border-radius: 4px;
        border: 1px solid orange;
    }
}

html,
body {
    overscroll-behavior: none;

    color-scheme: light dark;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);

    font-family:
        system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: var(--body-bg-1);
    color: var(--body-text-color);
}

main {
    background-color: var(--body-bg);
    display: grid;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    height: 100%;
    position: relative;

    #conversation {
        position: fixed;
        inset: 0;
        background: var(--body-bg);

        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    @media screen and (min-width: 600px) {
        grid-template-columns: 250px 1fr;

        #conversation {
            position: static;
        }
    }
}

#chats {
    padding: 8px;
    background: var(--body-bg-1);
    overflow: auto;

    a.chat {
        color: light-dark(darkblue, lightblue);
        display: flex;
        flex-direction: column;
        padding: 8px;
        text-decoration: none;
        border-radius: 2px;

        &:hover {
            background: light-dark(#eee, #222);
        }
        &:active {
            background: light-dark(#ccc, #555);
        }

        &.current-chat {
            background: light-dark(white, black);
        }
        &.unread {
            font-weight: 600;
            font-style: italic;
            color: light-dark(orange, #e3ab78);
        }

        .chat-name {
            text-overflow: ellipsis;
            overflow: hidden;
            text-wrap: nowrap;
        }
        .last-message {
            margin-top: 4px;
            color: dimgray;
            font-size: 0.85em;
            text-overflow: ellipsis;
            text-wrap: nowrap;
            overflow: hidden;
        }
    }
}

#conversation {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

#conversation.hidden {
    display: none;
}

#conversationToolbar {
    padding: 8px;
    background: var(--body-bg-1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    & > * {
        display: flex;
        align-items: center;
        gap: 4px;
    }
}

#messages {
    height: 100%;
    padding: 4px;
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;

    scrollbar-gutter: stable;
}

span.message {
    display: block;
    padding: 8px;
    border-radius: 4px;
    background: light-dark(#eee, #222);
    max-width: min(80%, 500px);
    position: relative;
    text-wrap: wrap;
    word-break: break-all;

    align-self: start;
    &.from-me {
        background: light-dark(lightsteelblue, royalblue);
        align-self: end;

        .author {
            right: 0;
            left: unset;
        }
    }

    margin-top: 0.9rem;
    .author {
        opacity: 0.7;
        font-size: 0.9rem;
        position: absolute;
        top: -1.2rem;
        left: 0;
        text-wrap: nowrap;
    }
}

#sendMessageForm {
    padding: 8px;
    display: flex;
    gap: 4px;

    textarea {
        width: 100%;
        field-sizing: content;
        min-height: 2rem;
    }

    label.file-input-label {
        border-radius: 4px;
        padding-inline: 8px;
        background: light-dark(#eee, #222);
        display: flex;
        align-items: center;
    }
}

input,
textarea {
    padding: 8px;
    background: light-dark(#eee, #222);
    border: none;
    border-radius: 4px;
    font-family: inherit;
}

button {
    border: 1px solid transparent;
    border-radius: 4px;
    padding-block: 4px;
    padding-inline: 8px;
    background: light-dark(#e0e0e0, #252525);
    color: light-dark(#2f2f2f, #e0e0e0);
    display: flex;
    align-items: center;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 150ms ease;
    text-align: center;
    justify-content: center;
    align-items: center;

    &:hover {
        background: light-dark(#e0e0e0, #2f2f2f);
        scale: 1.01;
    }
    &:active {
        background: light-dark(#dadada, #202020);
        scale: 0.99;
    }
}

#enableNotificationsBox {
    padding: 8px;
    border-radius: 12px;
    margin-block: 1rem;

    background-color: light-dark(lightblue, #3e569e);

    p {
        margin-top: 0;
    }
}

.text-nowrap {
    text-wrap: nowrap;
}

.button-row {
    display: flex;
    align-items: center;
    gap: 4px;

    &.wrap {
        flex-wrap: wrap;
    }
}

#unlockUserKeyModal,
#manageUserKeyModal {
    --contrast-color: light-dark(#ccc, #444);
}

#uuk__availableMethods > * {
    padding: 4px;
    border-radius: 8px;
    border: 2px solid var(--contrast-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;

    .wrapper-1 {
        display: flex;
        gap: 4px;
        align-items: center;

        .key-type {
            text-align: center;
            padding: 4px 4px;
            border-radius: 4px;
            background: var(--contrast-color);
            font-size: 0.8rem;
            font-weight: lighter;
        }

        .key-name {
            font-size: 1.1rem;
            font-weight: bold;
        }
    }

    & > :first-child {
        margin-top: 0;
    }
    & > :last-child {
        margin-bottom: 0;
    }
}

#muk__availableMethods > * {
    margin-top: 12px;
    padding: 4px;
    border-radius: 8px;
    border: 2px solid var(--contrast-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;

    .wrapper-1 {
        display: flex;
        gap: 4px;
        align-items: center;

        .key-type {
            text-align: center;
            padding: 4px 4px;
            border-radius: 4px;
            background: var(--contrast-color);
            font-size: 0.8rem;
            font-weight: lighter;
        }

        .key-name {
            font-size: 1.1rem;
            font-weight: bold;
        }

        .key-is-current {
            font-style: italic;
            color: light-dark(orange, orange);
        }
    }

    & > :first-child {
        margin-top: 0;
    }
    & > :last-child {
        margin-bottom: 0;
    }
}

.change-password-form {
    border: 1px solid var(--contrast-color);
    border-radius: 4px;
    padding: 12px;
    margin-block: 12px;

    display: grid;
    gap: 4px;

    /*grid-template-columns: 200px 1fr;*/
    @media screen and (min-width: 400px) {
        grid-template-columns: 200px 1fr;
    }
    @media screen and (max-width: 400px) {
        grid-template-columns: 1fr;
    }

    legend {
        grid-column: 1 / -1;
        margin-bottom: 12px;
        font-weight: 600;
        font-size: 1.1rem;
    }

    input {
        max-width: 300px;
    }

    .button-row {
        grid-column: 1 / -1;
    }
}