/* The action has its own viewport-anchored space, independent of text height. */
.envelope{inset:auto;top:var(--gate-top,0px);left:var(--gate-left,0px);width:var(--gate-width,100%);height:var(--gate-height,100vh);height:var(--gate-height,100svh);padding:0}
.opening-action{position:absolute;right:6%;bottom:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:43%;max-width:600px;display:flex;justify-content:center;z-index:5;padding:8px 0}
.opening-action .button{min-height:52px;max-width:100%;background:#6f7e43;color:#fffefa;border-color:#aa946c88;box-shadow:0 6px 20px #46543b22}
.envelope .invitation{top:50%;bottom:auto;transform:translateY(calc(-50% - 40px));max-height:calc(100% - 130px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px 16px}
.envelope.opening .opening-action{visibility:hidden;pointer-events:none}
@media(max-width:759px){
 .opening-action{left:5%;right:5%;width:90%;max-width:none}
 .envelope .invitation{top:auto;bottom:100px;bottom:calc(100px + env(safe-area-inset-bottom,0px));transform:none;max-height:calc(100% - 130px);right:5%;width:90%}
}
@media(max-height:450px){
 .envelope .invitation{top:12px;bottom:100px;bottom:calc(100px + env(safe-area-inset-bottom,0px));transform:none;max-height:none;right:2%;width:52%;padding:4px 8px}
 .opening-action{left:auto;right:2%;width:52%}
}