html {
    --gap-small: 2.6px;
    --gap-medium: 4px;
    --gap-large: 6px;
    --font-family: "Inter", "Roboto", "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Arial", sans-serif;
    --font-size: 14px;
    --line-height: 1.25;

    font-size: var(--font-size);
    font-family: var(--font-family);
    line-height: var(--line-height);

    min-height: 100%; /* always fill viewport */
    display: flex;

    overflow-x: hidden;
}
body {
    flex: 1; /* fill html element */
    margin: 0;
    max-height: 100vh; /* prevent scrolling of whole page */
    overflow-x: hidden;

    /* ____________
    | nav  |  main |
    |______|_______|
    | 2col footer  |
    |_____________*/
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: auto max-content;
}
input, textarea, select, button {
    font: inherit; /* same font as rest of page (duh) */
}
pre {
    margin: 0;
    font-size: 0.9rem;
    display: flex;
}
code {
    margin: 0;
    padding: var(--gap-small);
    display: flex;
    font-size: 0.9rem;
    resize: vertical; /* allow vertical resizing */
    height: 2.5rem;
    max-height: 50vh;
    overflow-y: scroll;
    overflow-x: hidden;
}
#sidebar {
    scrollbar-width: thin;
    scrollbar-color: var(--base03) var(--base00);
    width: var(--sidebar-width, 200px); /* user-defined width, or default */
    border-right: 1px solid var(--base03);
    overflow-x: hidden; /* clip horizontal overflow */
    /* position: relative; */ /* for resizer */
}
#sidebar-resizer {
    left: calc(var(--sidebar-width,200px));
    width: var(--gap-medium);
    cursor: col-resize;
    position: fixed; /* don't scroll with sidebar */
    top: 0;
    bottom: 0; /* full height */
}
#sidebar > a {
    text-decoration: none;
    color: inherit;
}
.room-link {
    display: block;
    border-bottom: 1px solid var(--base03);
    padding: var(--gap-small) var(--gap-medium);
}
.room-link.selected, .room-link:hover {
    background-color: var(--base01);
}
.room-title {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--base09);
}
main {
    overflow-y: hidden;
    align-self: end; /* align to bottom if not filling height */
    max-height: 100%; /* limit height to parent */

    /*_______
    |   log  |
    |        |
    |________|
    | input  |
    |_______*/
    display: grid;
    grid-template-rows: 1fr max-content;
}
@media (max-width: 600px) {
    body {
        display: flex;
        flex-direction: column;
    }
    #sidebar-resizer {
        display: none; /* no resizer on mobile */
    }
    main {
        display: none;
    }
    .in-room main {
        display: grid;
    }
    #sidebar {
        width: unset;
        flex: 1;
        max-width: 100%;
        border-right: none;
    }
    .in-room #sidebar {
        display: none; /* hide sidebar in room view */
    }
}
.author-resizer {
    cursor: col-resize;
}
#log {
    scrollbar-width: thin;
    scrollbar-color: var(--base03) var(--base00);
    display: grid;
    grid-template-columns: var(--author-width, max-content) var(--gap-medium) 1fr;
    row-gap: var(--gap-small);
    padding-top: var(--gap-small);
    padding-right: var(--gap-small);
    padding-bottom: var(--gap-medium);
    padding-left: var(--gap-large);
    overflow-y: scroll;
    overflow-wrap: anywhere;
    position: relative; /* for reply viz */
}
.log-message,
.is-typing {
    display: contents; /* use grid layout of parent */
}
.log-message.reaction .body .text {
    font-style: italic;
    color: var(--base0A);
}
.log-message.reply .body .text {
    /* display: inline-block; */
    /* display:block; */
    /* padding-left: 10px; */
}
.log-message {
    /* padding-left: calc(var(--replies) * 10px); */
}
.log-message .body {
    /* gap: var(--gap-medium); */
    /* max-width: 400px; */
    /* overflow: hidden; */
    /* overflow-x: hidden;
    overflow-y: visible; */
    min-width: 0; /* allow shrinking */
}
.log-message.plain-format .body .text {
    /* border-left: calc(var(--replies) * 10px) solid var(--base0E); */
    /* padding-left: calc(min(var(--replies), 1) * 0.25rem); */
    /* padding-left: 0.25rem; */
    /* margin-left: 4px; */
    white-space: pre-line; /* preserve newlines */
}
.log-message .time-badge {
    /* padding-left: var(--gap-medium); */
}
.is-typing .author {
    font-style: italic;
    opacity: 0.7;
}
.is-typing .body {
    font-style: italic;
    opacity: 0.7;
    font-size: 0.9rem;
    padding-left: 1px;
    margin-bottom: -0.5px;
    align-self: center;
}
#log .author {
    font-weight: bold;
    text-align: right;
    color: var(--base08);
    overflow-x: clip;
    text-wrap: nowrap;
}
.last-message {
    gap: var(--gap-medium);
    display: flex;
    white-space: nowrap;
    align-items: end;
    font-size: 0.9rem;
}
.last-message .author {
    font-weight: bold;
    color: var(--base08);
}
.last-message .body {
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
}
#message-input {
    border: none;
    outline: none;
    border-top: 1px solid var(--base02);
    min-height: 1em;
    resize: none;
    overflow: hidden;
    max-height: 10em;
    box-sizing: border-box;
}
#message-input::placeholder {
    color: var(--base04);
}
input[type="text"], textarea {
    font-family: inherit;
    padding: var(--gap-medium) var(--gap-medium);
}
.time-badge {
    font-size: 0.8rem;
    opacity: 0.6;
    text-wrap: nowrap;
    align-self: end;
    margin-bottom: 1px;
    vertical-align: bottom;
    display: inline-block; /* for margin-bottom to apply */
}
footer {
    border-top: 1px solid var(--base03);
    color: var(--base04);
    font-size: 0.9rem;
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}
#last-event {
    font-style: italic;
    height: 100%;
    align-content: center;
    padding: 0 var(--gap-medium);
    opacity: 0.8;
    text-wrap: nowrap;
    border-left: 1px solid var(--base03);
}
#line-height {
    border: none;
    outline: none;
    font-size: 0.8rem;
    color: var(--base04);
    padding: 0 var(--gap-medium);
    border-left: 1px solid var(--base03);
    opacity: 0.8;
    height: 100%;
    width: 2.5em;
    text-align: center;
}
#font-size {
    border: none;
    outline: none;
    font-size: 0.8rem;
    color: var(--base04);
    padding: 0 var(--gap-medium);
    border-left: 1px solid var(--base03);
    opacity: 0.8;
    height: 100%;
    width: 2.5em;
    text-align: center;
}
#font-family {
    border: none;
    outline: none;
    font-size: 0.8rem;
    opacity: 0.8;
    padding: 0;
    padding-left: var(--gap-medium);
    border-left: 1px solid var(--base03);
    width: 80px;
}
#theme-dropdown {
    /* appearance: none; */
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--base03);
    outline: none;
    opacity: 0.8;
    height: 100%;
    font-size: 0.8rem;
}
#motd {
    font-style: italic;
    padding-left: var(--gap-small);
    overflow: hidden;
    white-space: nowrap;
    opacity: 0.8;
    flex: 1;
    text-align: center;
}
/* #log-container {
    overflow: auto;
} */
.reply-quote {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

    min-width: 0; /* allow shrinking */
    max-width: 100%; /* prevent overflow */

    vertical-align: bottom; /* https://stackoverflow.com/questions/22421782/css-overflow-hidden-increases-height-of-container */
}
.reply-quote .author {
    font-weight: normal !important;
}
.reply-quote, blockquote {
    font-style: italic;
    background: var(--base01);
    color: var(--base05);
    opacity: 0.8;
    margin: 0;
    border-left: 4px solid var(--base03);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    display: inline-block;
    box-sizing: border-box; /* include padding in width calculation */
    /* margin: 0.1rem 0px; */
}
p {
    margin: 0;
}
.image-thumb {
    display: inline-block;
    vertical-align: middle;
    /* background: red; */
    background: var(--base01);
    padding-right: 0.25rem;
    /* height: 2rem; */
    /* width: 2rem; */
    /* max-height: 2rem;
    max-width: 50vw; */
    color: var(--base02);
    /* text-decoration: none; */

    padding-left: 2.25rem; /* space for background image */

    background-size: 2rem;
    background-position: left center;
    background-repeat: no-repeat;
    border-radius: 0.25rem;
    border: 1px solid var(--base03);
}
.image-thumb[href] {
    color: var(--base05);
}
.image-thumb img {
    display: none; /* hide image by default */
    pointer-events: none; /* ignore pointer events */
}
.image-thumb:hover img {
    display: inline-block; /* show image on hover */

    /* take the picture **out** of the normal flow so nothing can move     */
    position  : fixed;       /* related to the viewport                 */
    top       : 50%;
    left      : 50%;
    transform : translate(-50%,-50%);  /* centre it                      */

    /* fill the viewport but never exceed it                               */
    max-height: 100vh;
    max-width : 100vw;

    z-index   : 9999;        /* over anything else                      */
    cursor    : zoom-out;
}
.reply-quote p {
    display: contents;
}