/* Webmail on phones: the bottom dock and the install / notifications cards. Both designs. */
:root { --wmm-accent: #1273c4; --wmm-dock: 64px; --wmm-ink: #0f2236; --wmm-muted: #5a6b7d; --wmm-line: #e2e8ef; }

.wmm-dock { display: none; }
.wmm-sheet { display: none; }

@media (max-width: 860px) {
    /* The dock takes over these two header buttons. They stay in the page: the dock presses them. */
    body:has(.wmm-dock) #wm-hamburger, body:has(.wmm-dock) #wm-search-toggle { display: none !important; }

    .wmm-dock {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 690;
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
        height: calc(var(--wmm-dock) + env(safe-area-inset-bottom, 0px));
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        background: #fff; border-top: 1px solid var(--wmm-line);
        font-family: inherit;
    }
    /* Reading, writing or a sheet takes the whole screen; the dock steps aside. */
    body:has(.wm-reader.open-mobile) .wmm-dock, body:has(.wm-composer.open) .wmm-dock { display: none; }

    .wmm-dock-item {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-width: 0; height: var(--wmm-dock); padding: 0; border: 0; background: none;
        color: var(--wmm-muted); font: inherit; font-size: 11.5px; font-weight: 500; line-height: 1.2; text-decoration: none;
        cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    }
    .wmm-dock-ico { display: grid; place-items: center; width: 52px; height: 28px; border-radius: 14px; transition: background .15s, color .15s; }
    .wmm-dock-ico svg { display: block; width: 22px; height: 22px; }
    .wmm-dock-item:active .wmm-dock-ico { background: #eef2f6; }
    .wmm-dock-item[aria-current="page"] { color: var(--wmm-accent); font-weight: 600; }
    .wmm-dock-item[aria-current="page"] .wmm-dock-ico { background: color-mix(in srgb, var(--wmm-accent) 12%, #fff); }
    .wmm-dock-item:focus-visible { outline: 2px solid var(--wmm-accent); outline-offset: -4px; border-radius: 12px; }

    .wmm-dock-new .wmm-dock-ico { width: 52px; height: 44px; border-radius: 14px; background: var(--wmm-accent); color: #fff; }
    .wmm-dock-new:active .wmm-dock-ico { background: var(--wmm-accent); transform: scale(.96); }

    .wmm-dock-count {
        position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
        border-radius: 9px; background: var(--wmm-accent); color: #fff; box-shadow: 0 0 0 2px #fff;
        font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
    }
    .wmm-dock-count[hidden] { display: none; }

    /* Room so the last message or line is never under the dock. */
    body:has(.wmm-dock) .wm-list { padding-bottom: calc(var(--wmm-dock) + env(safe-area-inset-bottom, 0px) + 12px); }
    body:has(.wmm-dock) .wm-page { padding-bottom: calc(var(--wmm-dock) + env(safe-area-inset-bottom, 0px)); }

    /* Search opens as one tidy box under the header. */
    body:has(.wmm-dock) .wm-search.mobile-open { left: 12px; right: 12px; top: 66px; min-height: 48px; box-sizing: border-box; border-radius: 12px; box-shadow: 0 12px 28px -12px rgba(15, 34, 54, .3), 0 0 0 1px var(--wmm-line); }
    body:has(.wmm-dock) .wm-search.mobile-open input { outline: none; font-size: 16px; }

    body:has(.wmm-dock) .wm-toast, body:has(.wmm-dock) .wm-toastwrap { bottom: calc(var(--wmm-dock) + env(safe-area-inset-bottom, 0px) + 12px); }

    /* Install / notifications card, just above the dock. */
    .wmm-sheet {
        position: fixed; left: 12px; right: 12px; bottom: calc(var(--wmm-dock) + env(safe-area-inset-bottom, 0px) + 12px); z-index: 695;
        display: block; max-width: 460px; margin: 0 auto; padding: 16px; box-sizing: border-box;
        background: #fff; border-radius: 16px; box-shadow: 0 16px 40px -12px rgba(15, 34, 54, .35), 0 0 0 1px rgba(15, 34, 54, .06);
        color: var(--wmm-ink); font-size: 14.5px; line-height: 1.45; animation: wmm-rise .25s ease-out both;
    }
    .wmm-sheet[hidden] { display: none; }
    body:has(.wm-reader.open-mobile) .wmm-sheet, body:has(.wm-composer.open) .wmm-sheet { display: none; }
    .wmm-sheet-top { display: flex; align-items: center; gap: 12px; }
    .wmm-sheet-mark { flex: none; display: block; width: 48px; height: 48px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--wmm-line); object-fit: contain; }
    .wmm-sheet h2 { margin: 0; color: var(--wmm-ink); font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
    .wmm-sheet p { margin: 10px 0 0; color: var(--wmm-muted); }
    .wmm-steps { margin: 10px 0 0; padding: 0 0 0 20px; color: var(--wmm-ink); }
    .wmm-steps li { margin: 4px 0; }
    .wmm-steps svg { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
    .wmm-sheet-acts { display: flex; gap: 8px; margin-top: 14px; }
    .wmm-btn {
        flex: 1 1 0; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: #eef2f6; color: var(--wmm-ink);
        font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    }
    .wmm-btn.is-main { background: var(--wmm-accent); color: #fff; }
    .wmm-btn:disabled { opacity: .6; cursor: default; }
    .wmm-btn:focus-visible { outline: 2px solid var(--wmm-accent); outline-offset: 2px; }
}

@keyframes wmm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wmm-sheet { animation: none; } .wmm-dock-ico { transition: none; } }