/*
 * DSDillon Mail
 * Composer V4 Executive
 */

.compose-window.composer-v2.hidden{
    display:none !important;
}

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

    right:22px !important;
    bottom:18px !important;

    width:min(
        590px,
        calc(100vw - 36px)
    ) !important;

    max-width:590px !important;
    max-height:min(
        610px,
        calc(100vh - 44px)
    ) !important;

    overflow:hidden !important;

    border:
        1px solid
        rgba(18,28,48,.11) !important;

    border-radius:
        18px !important;

    background:
        #fbfcff !important;

    box-shadow:
        0 30px 90px
            rgba(15,23,42,.22),
        0 9px 26px
            rgba(0,0,51,.08) !important;

    z-index:9999 !important;

    animation:
        dsdComposeV4
        .18s
        cubic-bezier(.2,.75,.25,1) !important;

    transition:
        width .18s ease,
        height .18s ease,
        transform .18s ease !important;
}

@keyframes dsdComposeV4{
    from{
        opacity:0;
        transform:
            translateY(8px)
            scale(.99);
    }

    to{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}

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

    width:100% !important;

    max-height:min(
        610px,
        calc(100vh - 44px)
    ) !important;
}

/* ======================================================
   EXPANDED / MINIMIZED
   ====================================================== */

.compose-window.composer-v2.is-expanded{
    width:min(
        920px,
        calc(100vw - 54px)
    ) !important;

    max-width:920px !important;

    max-height:
        calc(100vh - 54px) !important;
}

.compose-window.composer-v2.is-expanded form{
    max-height:
        calc(100vh - 54px) !important;
}

.compose-window.composer-v2.is-expanded .compose-editor{
    min-height:360px !important;
    max-height:520px !important;
}

.compose-window.composer-v2.is-minimized{
    width:350px !important;
}

.compose-window.composer-v2.is-minimized
form > *:not(.compose-head){
    display:none !important;
}

/* ======================================================
   HEADER
   ====================================================== */

.composer-v2 .compose-head{
    display:grid !important;

    grid-template-columns:
        34px 1fr auto !important;

    align-items:center !important;

    gap:10px !important;

    min-height:56px !important;

    padding:
        8px 10px !important;

    background:
        radial-gradient(
            circle at 86% -20%,
            rgba(212,175,137,.20),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #000033 0%,
            #081252 58%,
            #15237e 100%
        ) !important;

    color:#fff !important;
}

.composer-v2 .compose-head::before{
    content:"" !important;

    width:32px !important;
    height:32px !important;

    border-radius:
        9px !important;

    background:
        rgba(255,255,255,.10)
        url("/assets/brand/dsdillon-brand-mark-white.png")
        center / 20px 20px
        no-repeat !important;

    border:
        1px solid
        rgba(255,255,255,.13) !important;
}

.composer-v2 .compose-head span{
    font-size:.91rem !important;
    font-weight:760 !important;
}

.composer-v2 .compose-head span::after{
    content:
        "Secure business message" !important;

    display:block !important;

    margin-top:1px !important;

    color:
        rgba(255,255,255,.56) !important;

    font-size:.61rem !important;
    font-weight:500 !important;

    letter-spacing:.025em !important;
}

.compose-window-actions{
    display:flex !important;
    align-items:center !important;

    gap:4px !important;
}

.compose-window-actions button{
    width:31px !important;
    height:31px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;

    border:
        1px solid
        rgba(255,255,255,.11) !important;

    border-radius:
        8px !important;

    background:
        rgba(255,255,255,.07) !important;

    color:#fff !important;

    font-size:.98rem !important;

    cursor:pointer !important;

    transition:
        background .13s ease !important;
}

.compose-window-actions button:hover{
    background:
        rgba(255,255,255,.15) !important;
}

/* ======================================================
   FROM / RECIPIENTS
   ====================================================== */

.composer-v2 .compose-from-row{
    display:grid !important;

    grid-template-columns:
        42px 1fr auto !important;

    align-items:center !important;

    gap:7px !important;

    min-height:44px !important;

    padding:
        5px 11px !important;

    border-bottom:
        1px solid #edf0f5 !important;

    background:#fff !important;
}

.composer-v2 .compose-from-row label{
    color:#707987 !important;

    font-size:.72rem !important;
    font-weight:700 !important;
}

.composer-v2 .compose-from-row select{
    height:34px !important;

    width:100% !important;

    padding:
        0 9px !important;

    border:
        1px solid #e4e8f0 !important;

    border-radius:
        9px !important;

    background:
        #f8f9fc !important;

    color:#182033 !important;

    outline:none !important;

    font:
        600 .8rem/1
        "Segoe UI",
        system-ui,
        sans-serif !important;
}

.compose-recipient-actions{
    display:flex !important;

    gap:2px !important;
}

.compose-recipient-actions button{
    height:30px !important;

    padding:
        0 7px !important;

    border:0 !important;

    border-radius:
        7px !important;

    background:
        transparent !important;

    color:#667080 !important;

    font-size:.68rem !important;
    font-weight:700 !important;

    cursor:pointer !important;
}

.compose-recipient-actions button:hover{
    background:
        #eef1f7 !important;

    color:#000033 !important;
}

.composer-v2 .compose-field{
    min-height:42px !important;

    display:flex !important;
    align-items:center !important;

    gap:8px !important;

    padding:
        0 12px !important;

    border-bottom:
        1px solid #edf0f5 !important;

    background:#fff !important;
}

.composer-v2 .compose-field.hidden{
    display:none !important;
}

.composer-v2 .compose-field input[type="text"]{
    flex:1 1 auto !important;

    min-width:0 !important;

    width:100% !important;
    height:41px !important;

    padding:0 !important;

    border:0 !important;

    background:
        transparent !important;

    outline:none !important;

    box-shadow:none !important;

    color:#182033 !important;

    font:
        500 .86rem/1.2
        "Segoe UI",
        system-ui,
        sans-serif !important;
}

.composer-v2 .compose-field input::placeholder{
    color:#969daa !important;
}

.compose-subject-field
#composePriority{
    width:auto !important;
    height:28px !important;

    padding:
        0 7px !important;

    border:
        1px solid
        #e4e7ee !important;

    border-radius:
        8px !important;

    background:
        #f8f9fc !important;

    color:#697281 !important;

    outline:none !important;

    font:
        600 .65rem/1
        "Segoe UI",
        system-ui,
        sans-serif !important;
}

/* ======================================================
   TOOLBAR
   ====================================================== */

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

    display:flex !important;

    align-items:center !important;

    gap:1px !important;

    min-height:40px !important;

    padding:
        4px 9px !important;

    overflow-x:auto !important;

    border:0 !important;

    border-bottom:
        1px solid #edf0f5 !important;

    background:
        #fafbfe !important;

    scrollbar-width:none !important;
}

.composer-v2 .compose-toolbar::-webkit-scrollbar{
    display:none !important;
}

.composer-v2 .compose-toolbar button{
    min-width:30px !important;
    height:30px !important;

    padding:
        0 7px !important;

    border:
        1px solid
        transparent !important;

    border-radius:
        7px !important;

    background:
        transparent !important;

    color:#505a69 !important;

    box-shadow:none !important;

    font-size:.69rem !important;
    font-weight:700 !important;

    cursor:pointer !important;
}

.composer-v2 .compose-toolbar button:hover{
    background:
        #eceff5 !important;

    color:#000033 !important;
}

.composer-v2 .compose-toolbar button.is-active{
    background:
        #000033 !important;

    color:#fff !important;
}

.compose-toolbar-separator{
    width:1px !important;
    height:17px !important;

    margin:
        0 3px !important;

    background:
        #dfe3eb !important;

    flex:
        0 0 1px !important;
}

/* ======================================================
   EDITOR
   ====================================================== */

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

    flex:
        1 1 auto !important;

    background:#fff !important;
}

.composer-v2 .compose-editor{
    min-height:170px !important;
    max-height:240px !important;

    overflow-y:auto !important;

    margin:0 !important;

    padding:
        15px 14px !important;

    border:0 !important;

    outline:none !important;

    background:#fff !important;

    color:#151d2b !important;

    box-shadow:none !important;

    font:
        400 .89rem/1.58
        "Segoe UI",
        system-ui,
        sans-serif !important;
}

.composer-v2 .compose-editor:empty::before{
    content:
        "Write your message…" !important;

    color:#a0a6b0 !important;
}

.compose-drop-overlay{
    position:absolute !important;

    inset:8px !important;

    z-index:20 !important;

    display:none !important;

    align-items:center !important;
    justify-content:center !important;

    border:
        2px dashed #182a86 !important;

    border-radius:
        12px !important;

    background:
        rgba(241,245,255,.95) !important;

    color:#000033 !important;

    font-size:.8rem !important;
    font-weight:750 !important;

    pointer-events:none !important;
}

.compose-editor-wrap.is-dragging
.compose-drop-overlay{
    display:flex !important;
}

/* ======================================================
   SIGNATURE
   ====================================================== */

.compose-signature-shell{
    margin:
        0 10px 6px !important;

    padding:
        6px 8px !important;

    border:
        1px solid #e7eaf0 !important;

    border-radius:
        9px !important;

    background:
        #f8f9fc !important;

    transition:
        opacity .15s ease,
        filter .15s ease !important;
}

.compose-signature-shell.is-disabled{
    opacity:.45 !important;

    filter:
        grayscale(.7) !important;
}

.compose-signature-meta{
    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    gap:8px !important;

    color:#77808f !important;

    font-size:.57rem !important;
    font-weight:750 !important;

    text-transform:
        uppercase !important;

    letter-spacing:.045em !important;
}

.compose-signature-actions button{
    padding:
        2px 5px !important;

    border:0 !important;

    border-radius:
        5px !important;

    background:
        transparent !important;

    color:#35446c !important;

    font-size:.57rem !important;
    font-weight:750 !important;

    cursor:pointer !important;
}

.compose-signature-actions button:hover{
    background:
        #eceff7 !important;
}

.compose-signature-preview{
    max-height:54px !important;

    margin-top:4px !important;

    overflow:auto !important;

    color:#283142 !important;

    font-size:.66rem !important;
}

/* ======================================================
   ATTACHMENTS
   ====================================================== */

#composeAttachments{
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    opacity:0 !important;

    overflow:hidden !important;

    pointer-events:none !important;
}

.compose-attachment-list{
    display:flex !important;
    flex-wrap:wrap !important;

    gap:4px !important;

    padding:
        0 10px 6px !important;
}

.compose-attachment-list:empty{
    display:none !important;
}

.compose-attachment-chip{
    display:inline-flex !important;

    align-items:center !important;

    gap:5px !important;

    max-width:220px !important;

    min-height:27px !important;

    padding:
        2px 4px 2px 8px !important;

    border:
        1px solid #e0e4ec !important;

    border-radius:
        8px !important;

    background:
        #f5f7fa !important;

    font-size:.63rem !important;
}

.compose-attachment-name{
    overflow:hidden !important;

    white-space:nowrap !important;

    text-overflow:
        ellipsis !important;

    font-weight:650 !important;
}

.compose-attachment-size{
    color:#818896 !important;
}

.compose-attachment-remove{
    width:20px !important;
    height:20px !important;

    padding:0 !important;

    border:0 !important;

    border-radius:
        6px !important;

    background:
        transparent !important;

    color:#727b88 !important;

    cursor:pointer !important;
}

.compose-attachment-remove:hover{
    background:
        #f4e8e8 !important;

    color:#8b0000 !important;
}

/* ======================================================
   POPOVERS
   ====================================================== */

.compose-popover{
    position:fixed !important;

    z-index:12000 !important;

    display:none !important;

    width:250px !important;

    padding:9px !important;

    border:
        1px solid #dfe3eb !important;

    border-radius:
        12px !important;

    background:
        rgba(255,255,255,.99) !important;

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

.compose-popover.open{
    display:block !important;
}

.compose-popover-title{
    margin:
        1px 2px 8px !important;

    color:#616b7b !important;

    font-size:.6rem !important;
    font-weight:800 !important;

    text-transform:
        uppercase !important;

    letter-spacing:.055em !important;
}

.compose-format-row{
    margin-bottom:8px !important;
}

.compose-format-row label{
    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    gap:10px !important;

    color:#596272 !important;

    font-size:.68rem !important;
    font-weight:650 !important;
}

.compose-format-row select{
    height:28px !important;

    border:
        1px solid #e0e4ec !important;

    border-radius:
        7px !important;

    background:#f8f9fc !important;

    font-size:.67rem !important;
}

.compose-format-label{
    margin:
        8px 2px 5px !important;

    color:#838b98 !important;

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

.compose-color-grid{
    display:flex !important;
    flex-wrap:wrap !important;

    gap:5px !important;
}

.compose-color-swatch{
    width:23px !important;
    height:23px !important;

    padding:0 !important;

    border:
        2px solid #fff !important;

    border-radius:
        7px !important;

    background:
        var(--swatch) !important;

    box-shadow:
        0 0 0 1px
        #d8dce5 !important;

    cursor:pointer !important;
}

.compose-format-actions{
    display:grid !important;

    grid-template-columns:
        repeat(2,1fr) !important;

    gap:4px !important;

    margin-top:9px !important;
}

.compose-format-actions button{
    height:29px !important;

    border:
        1px solid #e2e5ec !important;

    border-radius:
        7px !important;

    background:
        #f8f9fc !important;

    color:#4e5867 !important;

    font-size:.63rem !important;
    font-weight:700 !important;

    cursor:pointer !important;
}

.compose-format-actions button:hover{
    background:
        #eef1f6 !important;
}

/* Emoji */

.compose-emoji-panel{
    width:286px !important;
}

#composeEmojiSearch{
    width:100% !important;
    height:31px !important;

    margin-bottom:7px !important;

    padding:
        0 9px !important;

    border:
        1px solid #e0e4eb !important;

    border-radius:
        8px !important;

    outline:none !important;

    background:
        #f8f9fc !important;

    font-size:.69rem !important;
}

.compose-emoji-grid{
    display:grid !important;

    grid-template-columns:
        repeat(8,1fr) !important;

    gap:2px !important;

    max-height:190px !important;

    overflow:auto !important;
}

.compose-emoji-grid button{
    width:31px !important;
    height:31px !important;

    padding:0 !important;

    border:0 !important;

    border-radius:
        7px !important;

    background:
        transparent !important;

    font-size:1rem !important;

    cursor:pointer !important;
}

.compose-emoji-grid button:hover{
    background:
        #eef1f6 !important;
}

.compose-emoji-grid button.filtered{
    display:none !important;
}

/* More */

.compose-more-panel{
    width:230px !important;
}

.compose-option-toggle,
.compose-option-action{
    width:100% !important;

    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    min-height:36px !important;

    padding:
        0 8px !important;

    border:0 !important;

    border-radius:
        8px !important;

    background:
        transparent !important;

    color:#354052 !important;

    font-size:.68rem !important;
    font-weight:650 !important;

    cursor:pointer !important;
}

.compose-option-toggle:hover,
.compose-option-action:hover{
    background:
        #f1f3f7 !important;
}

.compose-option-toggle strong,
.compose-option-action strong{
    color:#737d8c !important;

    font-size:.61rem !important;
}

/* ======================================================
   FOOTER
   ====================================================== */

.compose-footer{
    min-height:52px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    padding:
        6px 10px 8px !important;

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

    background:
        #fafbfe !important;
}

.compose-footer-left,
.compose-footer-right{
    display:flex !important;

    align-items:center !important;

    gap:7px !important;
}

.composer-v2 .send-button{
    min-width:82px !important;
    height:36px !important;

    padding:
        0 15px !important;

    border:0 !important;

    border-radius:
        9px !important;

    background:
        linear-gradient(
            135deg,
            #000033,
            #14247d
        ) !important;

    color:#fff !important;

    box-shadow:
        0 8px 18px
        rgba(0,0,51,.17) !important;

    font-size:.76rem !important;
    font-weight:780 !important;

    cursor:pointer !important;
}

.compose-hint,
.compose-security-state{
    color:#9299a5 !important;

    font-size:.57rem !important;
    font-weight:600 !important;
}

.compose-security-state::before{
    content:"●" !important;

    margin-right:4px !important;

    color:#20815c !important;

    font-size:.52rem !important;
}

.trash-button{
    width:34px !important;
    height:34px !important;

    padding:0 !important;

    border:
        1px solid #e3e6ed !important;

    border-radius:
        8px !important;

    background:#fff !important;

    color:#68717f !important;

    cursor:pointer !important;
}

.trash-button:hover{
    color:#8b0000 !important;

    background:#fff7f7 !important;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */

@media(max-width:650px){

    .compose-window.composer-v2{
        inset:
            auto 8px 8px 8px !important;

        width:auto !important;

        max-width:none !important;

        max-height:
            calc(100vh - 16px) !important;
    }

    .compose-window.composer-v2 form{
        max-height:
            calc(100vh - 16px) !important;
    }

    .composer-v2 .compose-from-row{
        grid-template-columns:
            36px 1fr auto !important;
    }

    .composer-v2 .compose-editor{
        min-height:160px !important;
        max-height:220px !important;
    }
}

/* ==========================================================
   DSDILLON MOBILE COMPOSER FINAL V2
   ========================================================== */

@media (max-width:720px) {

    body:has(.compose-window:not(.hidden)) {
        overflow:hidden !important;
    }

    .compose-window.composer-v2 {
        position:fixed !important;
        inset:0 !important;

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

        height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;

        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;

        z-index:10000 !important;

        display:flex;
        flex-direction:column;

        overflow:hidden !important;

        padding-top:env(safe-area-inset-top);
        padding-bottom:env(safe-area-inset-bottom);

        background:#fff;
    }

    .compose-window.composer-v2 form {
        width:100% !important;
        height:100% !important;

        display:flex !important;
        flex-direction:column !important;

        min-height:0 !important;
        overflow:hidden !important;
    }

    .composer-v2 .compose-head {
        flex:0 0 auto !important;
        min-height:52px !important;
        padding:6px 10px !important;
        border-radius:0 !important;
    }

    .composer-v2 input,
    .composer-v2 textarea,
    .composer-v2 select {
        font-size:16px !important;
    }

    .composer-v2 button {
        min-height:40px;
        touch-action:manipulation;
    }

    .composer-v2 .compose-editor-wrap,
    .composer-v2 .compose-body-wrap {
        flex:1 1 auto !important;

        min-height:0 !important;

        display:flex !important;
        flex-direction:column !important;

        overflow:hidden !important;
    }

    .composer-v2 #composeEditor,
    .composer-v2 .compose-editor {
        flex:1 1 auto !important;

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

        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch;

        padding:12px !important;

        font-size:16px !important;
        line-height:1.45 !important;
    }

    .composer-v2 .compose-toolbar {
        width:100% !important;

        display:flex !important;
        flex-wrap:nowrap !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;

        gap:3px !important;
        padding:4px 6px !important;
    }

    .composer-v2 .compose-toolbar::-webkit-scrollbar {
        display:none;
    }

    .composer-v2 .compose-toolbar > * {
        flex:0 0 auto !important;
    }

    .composer-v2 .compose-footer {
        flex:0 0 auto !important;

        width:100% !important;

        padding:7px 8px !important;

        background:#fff;
        border-top:1px solid #e5e7eb;
    }

    .composer-v2 .compose-popover,
    .composer-v2 #composeMorePanel,
    .composer-v2 #composeFormatPanel {
        max-width:calc(100vw - 16px) !important;
        max-height:60dvh !important;
        overflow-y:auto !important;
    }

    .composer-v2 #composeEmojiPanel {
        position:fixed !important;

        left:8px !important;
        right:8px !important;
        bottom:calc(60px + env(safe-area-inset-bottom)) !important;

        width:auto !important;
        max-width:none !important;
        max-height:42dvh !important;

        overflow-y:auto !important;

        z-index:10030 !important;
    }
}

/* DSDILLON MOBILE COMPOSER FINAL V2 */


/* ============================================================
   DSDILLON MOBILE MORE ACTION SHEET V1
   ============================================================ */

@media (max-width:720px) {

    .composer-v2 #composeMorePanel {
        position:fixed !important;

        top:
            calc(
                env(safe-area-inset-top)
                + 58px
            ) !important;

        left:8px !important;
        right:8px !important;

        bottom:
            calc(
                env(safe-area-inset-bottom)
                + 8px
            ) !important;

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

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

        margin:0 !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;

        overscroll-behavior:contain;

        -webkit-overflow-scrolling:touch;

        border-radius:16px !important;

        z-index:10060 !important;

        padding-bottom:
            calc(
                18px
                + env(safe-area-inset-bottom)
            ) !important;
    }

    .composer-v2
    #composeMorePanel
    .compose-productivity-priority {
        order:-100 !important;

        margin-top:0 !important;

        padding-top:4px !important;
    }

    .composer-v2 #composeMorePanel button,
    .composer-v2 #composeMorePanel [role="button"] {
        min-height:44px !important;
        touch-action:manipulation;
    }
}

/* DSDILLON MOBILE MORE ACTION SHEET V1 */


/* ============================================================
   DSDILLON COMPOSE PRODUCTIVITY V4
   ============================================================ */

@media (max-width:720px) {

    #composeMorePanel
    .dsd-productivity-visible {
        scroll-margin-top:8px;
    }

    #composeMorePanel
    .dsd-productivity-visible:first-child {
        margin-top:0 !important;
    }
}

/* DSDILLON COMPOSE PRODUCTIVITY V4 */


/* ============================================================
   DSDILLON COMPOSER FORMAT SHEET MOBILE V1
   ============================================================ */

@media (max-width:720px) {

    /*
     * Formatting A opens a dedicated scrollable surface.
     * It is independent of the compose editor scroll position.
     */

    .composer-v2
    #composeFormatPanel {
        position:fixed !important;

        left:8px !important;
        right:8px !important;

        top:
            calc(
                env(safe-area-inset-top)
                + 58px
            ) !important;

        bottom:
            calc(
                env(safe-area-inset-bottom)
                + 64px
            ) !important;

        width:auto !important;

        height:auto !important;

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

        margin:0 !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;

        -webkit-overflow-scrolling:touch !important;

        overscroll-behavior:contain !important;

        touch-action:pan-y !important;

        z-index:10060 !important;
    }

    .composer-v2
    #composeFormatPanel > * {
        max-width:100% !important;
    }

    .composer-v2
    #composeFormatPanel
    button,
    .composer-v2
    #composeFormatPanel
    select,
    .composer-v2
    #composeFormatPanel
    input {
        min-height:42px;

        touch-action:manipulation;
    }

    /*
     * Prevent underlying editor from stealing vertical swipes
     * while the formatting panel itself is being scrolled.
     */
    .composer-v2
    #composeFormatPanel:not(.hidden) {
        pointer-events:auto !important;
    }
}

/* DSDILLON COMPOSER FORMAT SHEET MOBILE V1 */