body {
    color: var(--label-primary);
    background-color: var(--background-secondary);
}

#app {
    /* appearance */
    width: 100dvw;
    height: 100dvh;
    background: var(--background-secondary);
}

.app-wrapper {
    /* appearance */
    width: 100%;
    height: 100%;

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

/* SERVER DOCK */

.app-serverDock {
    /* appearance */
    width: 100%;
    height: 92px;
    padding: 16px;
    box-sizing: border-box;

    /* flex */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.app-serverDock .server {
    /* appearance */
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--background-primary);

    /* flex */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-serverDock .server.button {
    outline: 0px solid color-mix(in srgb, var(--palette-banana) 60%, transparent);
    cursor: pointer;
    transition: transform 800ms linear(0, 0.01, 0.04 1.8%, 0.162 3.8%, 0.818 10.8%, 1.047 13.8%, 1.129, 1.19, 1.232,
            1.257 19.5%, 1.262 20.5% 21.4%, 1.254, 1.24 23.5%, 1.196 25.8%, 1.058 31.2%,
            0.999 33.9%, 0.955 37%, 0.941, 0.933 40.1%, 0.931 42.1%, 0.937, 0.949 46.6%,
            0.999 54.6%, 1.011, 1.017 60.4% 65.1%, 1.001 75.1%, 0.996 80.5%, 1.001), opacity 200ms ease-out, outline 200ms ease-out;
}

.app-serverDock .server.button:hover,
.app-serverDock .server.button:focus {
    transform: scale(1.1);
    outline: 4px solid color-mix(in srgb, var(--palette-banana) 60%, transparent);
}

.app-serverDock .server.button:active {
    transform: scale(0.95);
    opacity: 0.8;
    outline: 2px solid color-mix(in srgb, var(--palette-banana) 60%, transparent);
}

.app-serverDock .server-newButton {
    outline-color: color-mix(in srgb, var(--palette-honeydew) 30%, transparent)!important;
}

.app-serverDock .server .server-nameAbbrv {
    font-size: var(--size-headline-s);
    font-weight: 500;
    line-height: var(--height-headline-s);
    letter-spacing: var(--space-headline-s);
    color: var(--label-primary);
}

.serverDock-separator {
    /* appearance */
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--separator);

    /* flex */
    flex-shrink: 0;
}

.server-list-wrapper {
    /* appearance */
    width: 100%;
    height: 100%;

    /* flex */
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.app-serverDock .server-list {
    /* apperance */
    height: 92px;
    padding: 0px 12px;
    overflow-x: auto;

    /* flex */
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.app-serverDock .server-list::-webkit-scrollbar { display: none; }

/* APP COLUMNS */

.app-columns {
    /* appearance */
    width: 100%;
    min-height: 0%;

    /* flex */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* APP COLUMNS : SIDEBARS */

.app-columns .app-sidebar {
    /* appearance */
    width: 360px;
    height: 100%;

    /* flex */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    flex-shrink: 0;
}

.app-sidebar-content {
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
}

/* APP COLUMNS : CONTENT AREA */

.app-columns .app-contentArea {
    /* appearance */
    width: 100%;
    height: 100%;
    background: var(--background-primary);
    border-radius: 40px 40px 0px 0px;

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

    /* interaction */
    transition: opacity 80ms ease-in-out;
}

/* CONTENT AREA : MESSAGES */

.convo-messages {
    /* appearance */
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 16px;

    /* flex */
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

/* CONTENT AREA : MESSAGE COMPOSER */

.messageComposer {
    /* appearance */
    width: 100%;
    padding: 16px;
    box-sizing: border-box;

    /* flex */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.messageComposer input {
    width: 100%;
    padding: 13.5px;
}