:root {
    --button-background: linear-gradient(0deg, #ddd, #eee);
    --button-background-hover: linear-gradient(180deg, #ddd, #eee);
    --button-foreground: #000;
    --button-border: 1px solid #000;

    --input-border: 1px solid #000;

    --messages-background: #ffffff;
    --message-background: #f0f0f0;
    --message-background-alt: linear-gradient(0deg, #d5d5d5, #e5e5e5);
    --message-foreground: #fff;
    --message-border: 1px solid #ddd;

    --form-background: linear-gradient(0deg, #ced1ff, #f1f2ff);
    --form-foreground: #151a69;
    --form-border: 1px solid #a3a4d6;

    --pad: 8px;
}

* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100vh;
}

header {
    display: flex;
    flex-direction: column;
    padding: var(--pad);
    gap: var(--pad);

    background: var(--form-background);
    color: var(--form-foreground);
    border-bottom: var(--form-border);
}

main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

footer {
    display: flex;
    flex-direction: row;
    justify-content: end;
    padding: var(--pad);
    font-size: 0.8em;

    background: var(--form-background);
    color: var(--form-foreground);
    border-top: var(--form-border);
}

ul li {
    list-style-type: none;
    display: inline-block;
}

ul li:not(:first-child)::before {
    content: ' | ';
}

/** MESSAGES */
#chat-messages {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: var(--messages-background);
}

.message {
    background: var(--message-background);
    color: var(--message-color);
    border-bottom: var(--message-border);
    padding: calc(var(--pad) / 2) var(--pad);
}

.message:nth-child(even) {
    background: var(--message-background-alt);
}

.message .timestamp {
    color: gray;
}

.message img {
    max-width: 32px !important;
    max-height: 32px !important;
}

/** FORM */
.send-form {
    display: flex;
    flex-direction: column;
    gap: var(--pad);
}

.send-form .name-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--pad);
}

.send-form input {
    border: var(--input-border);
    padding: 2px;
    outline: none;
}

button,
.button {
    background: var(--button-background);
    color: var(--button-foreground);
    border: var(--button-border);
    padding: 2px;
    outline: none;
    text-decoration: none;
}

button:hover,
.button:hover {
    background: var(--button-background-hover);
    cursor: pointer;
}

.button:has(> img:only-child) {
    line-height: 0;
}

.send-form textarea[name="contents"] {
    min-height: 100px;
    resize: none;
    border: var(--input-border);
    padding: 2px;
    outline: none;
}