zulip/web/styles/compose.css

#compose_buttons {
    text-align: right;
    display: flex;
    column-gap: 4px;
    flex-direction: row;
    /* With precisely controlled line-heights
       in this area, stretch will both center
       and maintain uniform heights between the
       reply button and the new-message button. */
    align-items: stretch;

    .compose_mobile_button {
        /* Keep the new message button sized to match
           adjacent buttons. */
        min-width: inherit;
        padding: 3px 10px;
        border-radius: 4px;
        outline: none;
        /* This is ugly, but necessary to use the
           text + for the compose button. An icon
           would likely be a better choice here.
           1.2em is 16.8px at 14px em. */
        font-size: 1.2em;
        /* 1.2em is 16.8px at 14px em; this
           maintains the 20px em-equivalent compose
           line height, but at a 16.8px em. */
        line-height: 1.19em;
        font-weight: 400;
        color: var(--color-text-default);
        background-color: var(--color-background-compose-new-message-button);
        border: 1px solid var(--color-border-compose-new-message-button);

        &:hover {
            background-color: var(
                --color-background-compose-new-message-button-hover
            );
            border-color: var(--color-border-compose-new-message-button-hover);
        }

        &:active {
            background-color: var(
                --color-background-compose-new-message-button-active
            );
            border-color: var(--color-border-compose-new-message-button-hover);
        }
    }

    .reply_button_container {
        display: flex;
        flex-grow: 1;

        /* Adjust flexbox default `min-width` to allow smaller container sizes. */
        min-width: 0;

        /* Button-like styling */
        border-radius: 4px;
        background-color: var(
            --color-compose-collapsed-reply-button-area-background
        );
        border: 1px solid
            var(--color-compose-collapsed-reply-button-area-border);

        &:hover,
        &:focus {
            background-color: var(
                --color-compose-collapsed-reply-button-area-background-interactive
            );
            border-color: var(
                --color-compose-collapsed-reply-button-area-border-interactive
            );
        }

        #left_bar_compose_reply_button_big,
        #new_conversation_button {
            /* Keep the new message button sized to match
               adjacent buttons. */
            font-size: inherit;
            min-width: inherit;
            padding: 3px 10px;
            outline: none;
            border: none;
            color: var(--color-text-default);
            background: var(--color-compose-embedded-button-background);
            border-radius: 3px;
            line-height: var(--line-height-compose-buttons);
        }

        .compose-reply-button-wrapper {
            flex-grow: 1;
            display: flex;
            overflow: hidden;
        }

        #left_bar_compose_reply_button_big {
            width: 100%;
            text-align: left;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        #new_conversation_button {
            /* Remove the  `padding` to prevent margin from affecting parent height. */
            padding: 0 10px;
            min-width: inherit;
            margin: 1px;
            flex-shrink: 0;
            align-self: stretch;

            color: var(--color-compose-embedded-button-text-color);

            &:hover {
                background-color: var(
                    --color-compose-embedded-button-background-hover
                );
                color: var(--color-compose-embedded-button-text-color-hover);
            }
        }
    }

    .mobile_button_container {
        @media (width >= $sm_min) {
            display: none;
        }
    }

    #new_conversation_button,
    .new_direct_message_button_container {
        flex-shrink: 0;
        line-height: var(--line-height-compose-buttons);

        @media (width < $sm_min) {
            /* Override inline style injected by jQuery hide() */
            display: none !important;
        }
    }

    .new_direct_message_button_container {
        display: flex;
    }

    #new_direct_message_button {
        /* Keep the new message button sized to match
           adjacent buttons. */
        align-self: stretch;
        font-size: inherit;
        min-width: inherit;
        line-height: var(--line-height-compose-buttons);
        padding: 3px 10px;
        border-radius: 4px;
        outline: none;
        color: var(--color-text-default);
        background-color: var(--color-background-compose-new-message-button);
        border: 1px solid var(--color-border-compose-new-message-button);

        &:hover {
            background-color: var(
                --color-background-compose-new-message-button-hover
            );
            border-color: var(--color-border-compose-new-message-button-hover);
        }

        &:active {
            background-color: var(
                --color-background-compose-new-message-button-active
            );
            border-color: var(--color-border-compose-new-message-button-hover);
        }
    }
}

/* Main geometry for this element is in zulip.css */
#compose-content {
    background-color: var(--color-compose-box-background);
    padding: 4px 4px 6px;
    border: 1px solid var(--color-border-compose-content);
    border-radius: 9px 9px 0 0;
    box-shadow: 0 0 0 hsl(236deg 11% 28%);
    height: 100%;
    display: flex;
    flex-flow: column;
    box-sizing: border-box;

    &:hover {
        .composebox-buttons > button {
            opacity: 1;
        }
    }
}

.message_comp {
    display: none;
    padding: 0 7px 0 0;

    #compose_banners {
        max-height: min(25vh, 240px);
        overflow-y: auto;
        /* Align to compose controls; that's 112px width,
           plus 4px of grid gap for 116px here. */
        margin-right: calc(var(--compose-send-controls-width) + 4px);
    }
}

.compose_table {
    height: 100%;