/*
 * DSDillon Mail
 * Compact Composer V6
 */

.compose-window.composer-v2:not(.is-expanded){
    right:14px !important;
    bottom:12px !important;

    width:min(
        500px,
        calc(100vw - 24px)
    ) !important;

    max-width:500px !important;

    height:min(
        460px,
        calc(100vh - 24px)
    ) !important;

    max-height:min(
        460px,
        calc(100vh - 24px)
    ) !important;

    overflow:hidden !important;
}

.compose-window.composer-v2:not(.is-expanded) form{
    display:flex !important;
    flex-direction:column !important;

    height:100% !important;
    max-height:none !important;

    overflow:hidden !important;
}

/* Header */

.compose-window.composer-v2:not(.is-expanded)
.compose-head{
    min-height:48px !important;
    height:48px !important;

    flex:0 0 48px !important;

    padding:5px 8px !important;
}

/* From */

.compose-window.composer-v2:not(.is-expanded)
.compose-from-row{
    min-height:38px !important;

    flex:0 0 auto !important;

    padding:2px 8px !important;
}

.compose-window.composer-v2:not(.is-expanded)
.compose-from-row select{
    height:32px !important;
}

/* Recipient / subject rows */

.compose-window.composer-v2:not(.is-expanded)
.compose-field{
    min-height:36px !important;

    flex:0 0 auto !important;

    padding:0 9px !important;
}

.compose-window.composer-v2:not(.is-expanded)
.compose-field input[type="text"]{
    height:35px !important;
}

/* Priority */

.compose-window.composer-v2:not(.is-expanded)
#composePriority{
    height:27px !important;
}

/* Recipient Intelligence */

.compose-window.composer-v2:not(.is-expanded)
.dsd-ri-strip{
    min-height:27px !important;

    flex:0 0 auto !important;

    padding:2px 7px !important;
}

.compose-window.composer-v2:not(.is-expanded)
.dsd-ri-chip{
    height:22px !important;
}

.compose-window.composer-v2:not(.is-expanded)
.dsd-ri-refresh{
    height:22px !important;
}

/* Toolbar */

.compose-window.composer-v2:not(.is-expanded)
.compose-toolbar{
    min-height:34px !important;
    height:34px !important;

    flex:0 0 34px !important;

    padding:2px 6px !important;
}

.compose-window.composer-v2:not(.is-expanded)
.compose-toolbar button{
    min-width:27px !important;
    height:27px !important;

    padding:0 6px !important;
}

/* Editor gets all remaining space */

.compose-window.composer-v2
.compose-editor-wrap{
    position:relative !important;

    flex:1 1 auto !important;

    min-height:0 !important;

    overflow:hidden !important;

    background:#fff !important;
}

.compose-window.composer-v2:not(.is-expanded)
.compose-editor{
    width:100% !important;
    height:100% !important;

    min-height:105px !important;
    max-height:none !important;

    overflow-y:auto !important;

    padding:11px 12px !important;
}

/* Signature becomes one compact status bar */

.compose-window.composer-v2
.compose-signature-shell.dsd-v6-collapsed{
    flex:0 0 auto !important;

    min-height:27px !important;

    margin:0 7px 4px !important;
    padding:4px 7px !important;

    overflow:hidden !important;
}

.compose-window.composer-v2
.compose-signature-shell.dsd-v6-collapsed
.compose-signature-preview{
    display:none !important;
}

.compose-window.composer-v2
.compose-signature-shell
.compose-signature-meta{
    margin:0 !important;
}

.dsd-v6-signature-toggle{
    border:0 !important;

    background:transparent !important;

    color:#35446c !important;

    cursor:pointer !important;

    font-size:.56rem !important;
    font-weight:750 !important;
}

/* Attachments */

.compose-window.composer-v2
.compose-attachment-list{
    flex:0 0 auto !important;

    max-height:52px !important;

    overflow-y:auto !important;
}

/* Send footer always visible */

.compose-window.composer-v2
.compose-footer{
    position:relative !important;

    bottom:auto !important;

    z-index:50 !important;

    flex:0 0 44px !important;

    min-height:44px !important;
    height:44px !important;

    margin-top:auto !important;

    padding:4px 8px 5px !important;

    background:
        rgba(250,251,254,.995) !important;

    border-top:
        1px solid #e7eaf0 !important;

    box-shadow:
        0 -6px 18px
        rgba(15,23,42,.035) !important;
}

.compose-window.composer-v2
.send-button{
    height:34px !important;

    min-width:78px !important;

    padding:0 14px !important;
}

/* Expanded mode still keeps Send accessible */

.compose-window.composer-v2.is-expanded
.compose-editor-wrap{
    flex:1 1 auto !important;
    min-height:0 !important;
}

.compose-window.composer-v2.is-expanded
.compose-editor{
    height:100% !important;
    max-height:none !important;
}

/* Mobile */

@media(max-width:540px){

    .compose-window.composer-v2:not(.is-expanded){
        inset:auto 6px 6px 6px !important;

        width:auto !important;
        max-width:none !important;

        height:min(
            480px,
            calc(100vh - 12px)
        ) !important;

        max-height:calc(100vh - 12px) !important;
    }
}
/* ============================================================
   DSDILLON_MOBILE_COMPOSE_STABILITY_FINAL_V1

   Mobile composer viewport, recipient-row and editor stability.
   Scoped exclusively to the DSDillon V2 composer.
   ============================================================ */

@media (max-width:580px) {

    /*
     * Keep the composer bounded by the current mobile viewport.
     * dvh follows Android/iOS browser chrome more accurately
     * than legacy vh while the keyboard is appearing.
     */
    .compose-window.composer-v2 {
        box-sizing:
            border-box !important;

        max-width:
            calc(100vw - 8px) !important;

        max-height:
            calc(100dvh - 8px) !important;

        overflow:
            hidden !important;

        overscroll-behavior:
            contain !important;
    }

    .compose-window.composer-v2 form {
        display:
            flex !important;

        flex-direction:
            column !important;

        min-width:
            0 !important;

        min-height:
            0 !important;

        overflow:
            hidden !important;
    }

    /*
     * Recipient and subject rows must be allowed to shrink.
     * Without min-width:0, flex children can force the entire
     * composer wider than the handset.
     */
    .compose-window.composer-v2
    .compose-field {
        box-sizing:
            border-box !important;

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        flex-wrap:
            wrap !important;

        overflow-x:
            hidden !important;
    }

    .compose-window.composer-v2
    .compose-field > * {
        min-width:
            0;
    }

    .compose-window.composer-v2
    .compose-field input,
    .compose-window.composer-v2
    .compose-field textarea,
    .compose-window.composer-v2
    .compose-field select {
        box-sizing:
            border-box !important;

        min-width:
            0 !important;

        max-width:
            100% !important;
    }

    /*
     * Common recipient-chip implementations are constrained
     * without depending on one vendor-specific class name.
     */
    .compose-window.composer-v2
    :where(
        .recipient-chip,
        .recipient-token,
        .recipient-pill,
        .compose-recipient-chip,
        .compose-recipient-token,
        [data-recipient-chip]
    ) {
        box-sizing:
            border-box !important;

        max-width:
            100% !important;

        overflow:
            hidden !important;

        text-overflow:
            ellipsis !important;

        white-space:
            nowrap !important;

        flex:
            0 1 auto !important;
    }

    /*
     * The editor region owns its own vertical scrolling.
     * Keyboard appearance therefore reduces the available
     * editor space rather than moving the entire document.
     */
    .compose-window.composer-v2
    .compose-editor-wrap {
        flex:
            1 1 auto !important;

        width:
            100% !important;

        min-width:
            0 !important;

        min-height:
            0 !important;

        overflow:
            hidden !important;

        overscroll-behavior:
            contain !important;
    }

    .compose-window.composer-v2
    .compose-editor {
        box-sizing:
            border-box !important;

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        min-height:
            96px !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        overscroll-behavior:
            contain !important;

        -webkit-overflow-scrolling:
            touch;

        overflow-wrap:
            anywhere;

        word-break:
            break-word;
    }

    /*
     * Focused controls get a predictable browser scroll target
     * rather than causing aggressive viewport jumps.
     */
    .compose-window.composer-v2
    :where(
        input,
        textarea,
        select,
        [contenteditable="true"]
    ) {
        scroll-margin-top:
            56px;

        scroll-margin-bottom:
            64px;
    }

    /*
     * Footer remains part of the bounded composer instead of
     * participating in page-level scrolling.
     */
    .compose-window.composer-v2
    .compose-footer {
        flex:
            0 0 auto !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        z-index:
            3 !important;
    }

    /*
     * Prevent horizontal toolbars/actions from expanding the
     * compose surface beyond the screen.
     */
    .compose-window.composer-v2
    :where(
        .compose-toolbar,
        .compose-footer,
        .compose-from-row,
        .compose-attachment-list
    ) {
        box-sizing:
            border-box !important;

        min-width:
            0 !important;

        max-width:
            100% !important;
    }
}

/*
 * Extra protection for very narrow phones.
 */
@media (max-width:360px) {

    .compose-window.composer-v2
    .compose-editor {
        min-height:
            84px !important;
    }
}