/* R208 — native safe areas and reachable messaging on short viewports. */
body:has(.app-shell),body:has(.manage-shell),body:has(.owner-shell){
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px);
}
.app-shell{min-height:calc(100dvh - env(safe-area-inset-top,0px))!important}
.v2-global-header{top:env(safe-area-inset-top,0px)!important}
.manage-header{top:max(8px,env(safe-area-inset-top,0px))}
body:has(>.shell){padding-top:max(22px,env(safe-area-inset-top,0px));padding-bottom:max(22px,env(safe-area-inset-bottom,0px));padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
@media(max-width:600px){body:has(>.shell){padding-top:max(10px,env(safe-area-inset-top,0px));padding-bottom:max(10px,env(safe-area-inset-bottom,0px));padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px))}}
/* Keep the nav in document flow when it would cover the composer. Scrolling
   remains available; resizing never recreates the form or clears its draft. */
@media(max-height:480px){
 .app-shell:not(.coach-app-shell).chat-active .bottom-nav{position:static;left:auto;transform:none;width:100%;margin:10px 0 0}
 .app-shell:not(.coach-app-shell).chat-active .chat-conversation{padding-bottom:0}
}
html[data-compact-viewport] .app-shell:not(.coach-app-shell).chat-active .bottom-nav{position:static;left:auto;transform:none;width:100%;margin:10px 0 0}
html[data-compact-viewport] .app-shell:not(.coach-app-shell).chat-active .chat-conversation{padding-bottom:0}

/* Keep date controls and long identities within their management cards. */
.owner-header{top:max(8px,env(safe-area-inset-top,0px))}
.continuity-admin :is(input,select),.restore-dates>label{min-width:0;max-width:100%}
@media(max-width:520px){.restore-dates,.restore-comparison{grid-template-columns:minmax(0,1fr)}}
.manage-dialog .dialog-shell>header{gap:12px}
.manage-dialog .dialog-shell>header>div,.manage-dialog .person-hero>div,.manage-dialog .manage-edit-form label{min-width:0}
.manage-dialog .dialog-shell>header>button{flex-shrink:0}
.manage-dialog :is(h2,h3,.directory-chips){overflow-wrap:anywhere}
.manage-dialog input:not([type=checkbox]):not([type=radio]),.manage-dialog select{min-width:0;max-width:100%;width:100%}