/* show/hide */
#chat-page-wrapper {
    display: none;
}

body[showing-chat] #home-page {
    display: none;
}

body[showing-chat] #chat-page-wrapper {
    display: flex;

    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    background-color: var(--background-glass);

    z-index: 2;
}

/* layout */
#chat-page {
    --ribbon-size: var(--control-height);
}

#chat-page > div,
#chat-page > div > #ribbon,
#chat-page > div > #ribbon > span,
#chat-page > div > #main,
#chat-page > div > #main > div,
#chat-page > div > #main > div > .pane-wrapper > .pane,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span,
#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
    display: flex;
}

#chat-page > div {
    padding: 0px;
    overflow: hidden;
}

#chat-page > div > #main {
    width: calc(100% - var(--ribbon-size) - 1px);
}

#chat-page #main > div,
#chat-page > div > #main > div > .pane-wrapper,
#chat-page > div > #main > div > .pane-wrapper > .pane,
#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
    width: 100%;
    height: 100%;
    flex: 1;
}

#chat-page > div > #main > div > .pane-wrapper,
#chat-page > div > #main > div > .pane-wrapper > .pane {
    flex-direction: column;
    scroll-snap-align: center;

    min-width: 100%;
    overflow: hidden;
}

#chat-page > div > #main > div > .pane-wrapper > .pane:not(.side),
#chat-page > div > #main > div > .pane-wrapper > .pane:not(.side) .content {
    animation: slide-up var(--animation-duration);
}

@media (min-width: 1024px) {
    #chat-page > div > #main > div > .pane-wrapper {
        min-width: unset;
    }

    #chat-page > div > #main > div > .pane-wrapper.side {
        width: 18rem;
        min-width: 18rem;
        max-width: 18rem;
    }
}

#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
    flex-direction: column;
    overflow: auto;
    padding: var(--content-padding);
}

#chat-page #ribbon,
#chat-page #main,
#chat-page #main .content {
    flex-direction: column;
}

/* ribbon, toolbar */
#chat-page > div > #ribbon,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
    align-items: center;
}

#chat-page > div > #ribbon {
    width: calc(var(--ribbon-size) + 1px);
    border-right: 1px solid var(--border);
    padding-bottom: var(--safe-area-bottom);
}

#chat-page > div > #ribbon > span,
#chat-page
    > div
    > #main
    > div
    > .pane-wrapper
    > .pane
    > .toolbar
    > span.ribbon {
    gap: var(--gap-between-tiles);
    padding: var(--gap-between-tiles);
}

#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
    justify-content: start;
    justify-content: space-between;
}

#chat-page > div > #ribbon > span {
    overflow-y: auto;
    flex-direction: column;
    justify-content: end;
}

#chat-page > div > #ribbon > span.marquee {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#chat-page > div > #ribbon > span.marquee > span {
    transform: rotate(270deg);
    transform-origin: left;

    position: absolute;
    bottom: -10px;
    left: calc(var(--control-height) / 2);

    height: var(--control-height);
    min-width: 100vh;

    overflow: visible;
    text-overflow: visible;
    white-space: nowrap;

    display: flex;
    align-items: center;
    gap: var(--gap-between-tiles);
}

#chat-page > div > #ribbon > span.marquee > span > * {
    animation: slide-up var(--animation-duration);
}

#chat-page > div > #ribbon > .navigation-buttons {
    min-height: calc(var(--control-height) * 4);
    flex: 0;
}

#chat-page > div > #ribbon button,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button {
    padding: 0px;

    width: var(--control-height);
    max-width: var(--control-height);
    height: var(--control-height);
    min-height: var(--control-height);

    align-items: center;
    justify-content: center;
}

#chat-page > div > #ribbon button.ribbon-button,
#chat-page
    > div
    > #main
    > div
    > .pane-wrapper
    > .pane
    > .toolbar
    button.ribbon-button {
    min-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
    width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
    max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));

    min-height: unset;
    height: calc(var(--control-height) - 2 * var(--gap-between-tiles));

    color: var(--primary);
}

#chat-page > div > #ribbon button > .icon,
#chat-page
    > div
    > #main
    > div
    > .pane-wrapper
    > .pane
    > .toolbar
    button
    > .icon {
    font-size: 1.1rem;
}

#chat-page > div > #ribbon > span {
    width: 100%;
}

#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
    height: var(--ribbon-size);

    overflow-x: auto;

    padding: 0px;
}

#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
    display: flex;
    align-items: center;
}

#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
    padding-left: var(--content-padding);
}

#chat-page
    > div
    > #main
    > div
    > .pane-wrapper
    > .pane
    > .toolbar
    :is(input, select, button) {
    height: 100%;
    flex: 1;
}