/* Shared dialog sizing. Keep every action reachable without horizontal scrolling. */
dialog:not(.is-touring){box-sizing:border-box;max-width:calc(100% - 24px);max-height:calc(100vh - 24px);max-height:calc(var(--lk-dialog-height,100dvh) - 24px);overscroll-behavior:contain}
dialog:not(.is-touring) .modal-header{min-width:0}
dialog:not(.is-touring) .modal-header h2{min-width:0;overflow-wrap:anywhere}
dialog:not(.is-touring) .modal-header>.icon-button{flex-shrink:0}
dialog:not(.is-touring) .modal-body{min-width:0}
dialog:not(.is-touring) .form-field{min-width:0}
dialog:not(.is-touring) :is(input,select,textarea){box-sizing:border-box;max-width:100%;min-width:0}
dialog:not(.is-touring) :is(.modal-footer,.gift-prize-actions,.caretaker-contact-actions,.giftbox-tabs){flex-wrap:wrap}
dialog:not(.is-touring) :is(.modal-footer,.gift-prize-actions)>.button{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;justify-content:center}
#gift-compose{min-width:0}
#gift-compose>p:first-child{color:var(--muted);font-size:14px;line-height:1.65}
#gift-compose .gift-search{flex-wrap:wrap}
#gift-compose .gift-search input{flex:1 1 140px;width:0}
#gift-compose :is(.button,input,select){min-height:44px}
#gift-compose select{width:100%}
#gift-compose #gift-recipient{overflow-wrap:anywhere}
#gift-compose #gift-search-results .button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
#gift-compose .form-error:empty,#gift-compose .gift-send-status:empty{display:none}
#gift-compose :is(.form-error,.gift-send-status){font-size:14px;line-height:1.5;overflow-wrap:anywhere;scroll-margin-block:16px}
#gift-compose .gift-send-status{color:#527565;margin:12px 0}
#gift-compose .modal-footer{flex-wrap:wrap;gap:10px}
#gift-compose .modal-footer>.button{flex:1 1 150px}

@media(max-width:760px),(max-height:600px),(pointer:coarse){
 dialog[open]:not(.is-touring):not(.lk-input-dialog){position:fixed;top:calc(var(--lk-dialog-top,0px) + 12px);bottom:auto;margin-block:0;max-height:calc(var(--lk-dialog-height,100dvh) - 24px)!important}
 dialog[open]:not(.is-touring){max-width:calc(100% - max(12px,env(safe-area-inset-left)) - max(12px,env(safe-area-inset-right)))!important}
 dialog:not(.is-touring) .modal-header{padding:14px 16px 10px}
 dialog:not(.is-touring) .modal-header h2{font-size:22px;line-height:1.2}
 dialog:not(.is-touring)>.modal-body{padding-left:16px;padding-right:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
 dialog:not(.is-touring) .modal-footer{gap:10px}
 dialog:not(.is-touring) .modal-footer>.button{flex:1 1 130px;min-height:44px}
 dialog:not(.is-touring) :is(input,textarea,select){font-size:16px}
 /* Long inbox introductions and tab rows must not squeeze the gifts to zero height. */
 dialog[open]:has(#giftbox-view){display:block;overflow-y:auto}
 dialog:has(#giftbox-view)>.modal-body{display:block;overflow:visible}
 #giftbox-view{display:block}
 #giftbox-view .giftbox-intro{flex-wrap:wrap;gap:10px;margin-bottom:12px}
 #giftbox-view .gift-collection{overflow:visible}
 /* Keep search, quantity and both gift actions in one ordinary scroll area. */
 dialog[open]:has(#gift-compose){overflow-y:auto!important;scroll-padding-block:16px;overflow-anchor:none}
 dialog[open].lk-input-dialog:has(#gift-compose){top:calc(var(--lk-dialog-top,0px) + 12px)!important;max-height:calc(var(--lk-dialog-height,100dvh) - 24px)!important}
 #gift-compose .form-field{margin-top:12px}
 #gift-compose .modal-footer{margin-top:16px}
}
/* Visual keyboard resizing need not change CSS media-query dimensions. */
html[data-lk-short-dialog] dialog[open]:has(#mailbox-view){overflow-y:auto}
html[data-lk-short-dialog] dialog:has(#mailbox-view)>.modal-body{flex:0 0 auto;overflow:visible}
html[data-lk-short-dialog] #mailbox-view{min-height:200px}
html[data-lk-short-dialog] #mailbox-view .message-list{min-height:64px}
html[data-lk-short-dialog] .message-compose .social-form-footer{flex-wrap:wrap}
@media(max-width:380px){
 dialog:not(.is-touring) .modal-footer{flex-direction:column;align-items:stretch}
 dialog:not(.is-touring) .modal-footer>.button{flex:auto;width:100%}
 #giftbox-view .giftbox-tabs button{padding:9px 10px}
}
/* On a short landscape/keyboard viewport, allow the whole mailbox to scroll too. */
@media(max-height:420px){
 dialog[open]:has(#mailbox-view){overflow-y:auto}
 dialog:has(#mailbox-view)>.modal-body{flex:0 0 auto;overflow:visible}
 #mailbox-view{min-height:200px}
 #mailbox-view .message-list{min-height:64px}
 .message-compose .social-form-footer{flex-wrap:wrap}
}