html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

button, input {
    background: white;
    color: black;
}

.main {
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: max-content max-content 1fr max-content;
    overflow: hidden;

    .account {
        grid-area: 1 / 1 / 2 / 5;
        align-self: center;
        justify-self: center;
        width: max-content;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        & > * {
            width: 100%;
        }
        &[hidden] {
            display: none;
        }

        .register, .login {
            form > div {
                position: relative;

                height: 2.5rem;
                
                input {
                    margin-left: 0.5rem;
                }
            }
            .error {
                position: absolute;
                bottom: 0;
                
                display: block;
                color: red;
                font-size: 0.75rem;
                margin-bottom: 0.5rem;
                height: 1em;
            }
        }
    }

    &:has(.account:not([hidden])) {
        .server-list, .channel-list, .chat {
            display: none;
        }
    }

    .server-list {
        grid-area: 1 / 1 / 2 / 2;
        display: grid;
        grid-template-rows: 1fr max-content;

        .list {
            display: flex;
            flex-direction: column;
            align-items: center;
            
            .server {
                &, & > button {
                    width: 100%;
                }
                &.selected > button {
                    background: black;
                    color: white;
                }
            }
        }

        .actions {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-items: center;
        }
    }

    .channel-list {
        grid-area: 1 / 2 / 2 / 3;
        display: grid;
        grid-template-rows: max-content 1fr max-content;
        min-width: 12rem;

        border-left: 1px solid currentColor;

        .list {
            display: flex;
            flex-direction: column;
            align-items: center;
            
            padding: 0.5rem;
            box-sizing: border-box;
            
            .channel {
                &, & > button {
                    width: 100%;
                }
                &.selected > button {
                    background: black;
                    color: white;
                }
            }
        }

        .server {
            padding: 0.25rem 0.5rem;
            box-sizing: border-box;
            border-bottom: 1px solid currentColor;

            font-size: 1.5rem;
            font-family: Arial, Helvetica, sans-serif;
        }

        .actions {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-items: center;
        }
    }

    .chat {
        grid-area: 1 / 3 / 2 / 4;

        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;

        display: grid;
        grid-template-rows: max-content 1fr max-content;
        overflow: hidden;

        outline: 1px solid currentColor;

        .no-channels-modal {
            grid-area: 1 / 1 / 4 / 2;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .titlebar {
            padding: 0.25rem 0.5rem;
            box-sizing: border-box;
            border-bottom: 1px solid currentColor;
            
            font-size: 1.5rem;
            font-family: Arial, Helvetica, sans-serif;
        }

        .logs {
            max-height: 100%;
            align-self: flex-end;
            
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            overflow-y: auto;

            padding: 0 0.5rem;
            box-sizing: border-box;

            .message {
                text-wrap: wrap;
                overflow-wrap: break-word;

                display: grid;
                grid-template-rows: max-content 1fr;
                grid-template-columns: max-content 1fr;
                align-items: center;

                margin-bottom: 1rem;

                .author {
                    grid-area: 1 / 1 / 2 / 2;
                }
                time {
                    grid-area: 1 / 2 / 2 / 3;
                    opacity: 0.75;
                    margin-left: 1ch;
                    font-size: 0.75em;

                    &::before {
                        content: "— ";
                    }
                }
                .content {
                    grid-area: 2 / 1 / 3 / 3;
                    padding-left: 1rem;
                    box-sizing: border-box;

                    .text.sending {
                        opacity: 0.5;
                    }
                }
            }
        }
        .input {
            form {
                display: grid;
                grid-template-columns: 1fr max-content;
            }
        }
    }
    .member-list {
        grid-area: 1 / 4 / 2 / 5;

        min-width: 12rem;

        display: grid;
        grid-template-rows: max-content 1fr;

        .list {
            display: flex;
            flex-direction: column;
            padding: 0.25rem;
            gap: 0.25rem;

            .member {
                width: 100%;
                display: grid;
                padding: 0.125rem 0.375rem;
                box-sizing: border-box;

                outline: 1px solid currentColor;

                &.owner {
                    background: yellow;
                }
                &:not(.online) {
                    background: #888;
                    opacity: 0.5;
                }
            }
        }

        .titlebar {
            padding: 0.25rem 0.5rem;
            box-sizing: border-box;
            border-bottom: 1px solid currentColor;
            
            font-size: 1.5rem;
            font-family: Arial, Helvetica, sans-serif;
        }

        .actions {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-items: center;
        }
    }
}