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;
}
body {
    flex: 1; /* fill html element */
    margin: 0;
    max-height: 100vh; /* prevent scrolling of whole page */

    /* ____________
    | 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) */
}
#sidebar {
    scrollbar-width: thin;
    scrollbar-color: var(--base00) var(--base03);
    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: scroll;
    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;
}
.author-resizer {
    cursor: col-resize;
}
#log {
    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;
}
.log-message,
.is-typing {
    display: contents; /* use grid layout of parent */
}
.log-message.reaction .body .text {
    font-style: italic;
    color: var(--base0A);
}
.log-message .body {
    /* gap: var(--gap-medium); */
    /* max-width: 400px; */
}
.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;
}
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;
}