/* One viewport shell. Only content surfaces scroll; controls never pan the page. */
:root{--viewport-height:100dvh;--viewport-top:0px}
html,body{height:100%;overflow:clip;overscroll-behavior:none}
body{position:fixed;inset:0;width:100%;min-width:0}
#app{position:fixed;top:var(--viewport-top);left:0;width:100%;height:var(--viewport-height);max-height:var(--viewport-height);overflow:clip}
.workspace{height:100%;overflow:clip}
.workspace-header,.scope-bar,.notice{flex-shrink:0}
.main-content{min-width:0;overflow-x:hidden;overscroll-behavior:contain}
.browse-layout,.messages,.customer-panel,.sidebar,.dialog-body{overscroll-behavior:contain;scrollbar-gutter:stable}
.composer-wrap{overscroll-behavior:contain}
.chat-layout{overflow:clip}
.messages{min-width:0;min-height:0;overflow-x:hidden;overflow-wrap:anywhere}
.composer-wrap{flex:0 1 auto;min-height:0;max-height:70%;overflow-y:auto;overflow-x:hidden}
.composer-toolbar>*{min-width:0;max-width:100%}
.composer textarea{resize:none}
.customer-panel,.sidebar{min-width:0}
.panel-header{position:sticky;top:0;z-index:1;background:var(--color-paper)}
.prompt-menu[open]{flex-basis:100%;order:-1}
.prompt-menu[open] .prompt-options{position:static;width:100%;max-height:none}
.detail-dialog[open],.concern-dialog[open]{display:flex;flex-direction:column;position:fixed;top:var(--viewport-top);bottom:auto;margin:12px auto;max-height:calc(var(--viewport-height) - 24px);max-width:calc(100% - 24px);overflow:hidden}
.detail-dialog>header,.concern-dialog>header{flex-shrink:0;min-width:0;gap:var(--space-sm)}
.detail-dialog>header h2,.concern-dialog>header h2{min-width:0;overflow-wrap:anywhere}
.detail-dialog>header button,.concern-dialog>header button{flex-shrink:0;min-width:44px;min-height:44px}
.dialog-body{min-height:0;min-width:0;overflow:auto;overflow-wrap:anywhere}
/* Field entry uses the same shell at any width. Footer height is intrinsic. */
#app.field-entry{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
.field-entry .workspace{height:100%;padding-bottom:0}
.field-entry .bottom-nav{position:static;min-width:0}
.dashboard-open .customer-panel.panel-open,.field-entry .sidebar.mobile-open,.field-entry .customer-panel.panel-open{position:absolute;top:0;bottom:0;height:100%;max-height:100%;max-width:100%}
.field-entry .sidebar.mobile-open{overflow-y:auto}
.login-page{position:fixed;top:var(--viewport-top);bottom:auto;height:var(--viewport-height);min-height:0;overflow:auto;overscroll-behavior:contain}
.login-card{flex-shrink:0;max-width:100%}
@media(max-width:1190px){
  .customer-panel{position:absolute;top:0;bottom:0;height:100%;max-height:100%;max-width:100%}
}
@media(max-width:700px){
  #app,#app.dashboard-open,#app.field-entry{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .workspace,.field-entry .workspace{height:100%;padding-bottom:0}
  .bottom-nav{position:static;min-width:0;flex-shrink:0;padding-left:max(var(--space-sm),env(safe-area-inset-left));padding-right:max(var(--space-sm),env(safe-area-inset-right))}
  .workspace-header{padding-left:max(var(--space-md),env(safe-area-inset-left));padding-right:max(var(--space-md),env(safe-area-inset-right))}
  .sidebar,.field-entry .sidebar.mobile-open{position:absolute;top:0;bottom:0;height:100%;max-height:100%;overflow-y:auto}
  .sidebar nav{max-height:none;overflow:visible}
  .session-list{flex:0 0 auto;overflow:visible}
  .sidebar .identity{flex-shrink:0}
  .customer-panel,.dashboard-open .customer-panel.panel-open,.field-entry .customer-panel.panel-open{position:absolute;top:0;right:0;left:auto;bottom:0;width:min(20rem,calc(100% - 40px));max-width:100%;height:100%;padding-bottom:max(var(--space-lg),env(safe-area-inset-bottom));box-shadow:-12px 0 32px var(--color-scrim)}
  input,textarea,select{max-width:100%}
  .list-filters>input,.list-filters>select{min-width:0;max-width:100%}
  .detail-dialog,.concern-dialog{width:calc(100% - 24px)}
  .login-card{margin:0 auto}
}

@media(max-width:700px),(pointer:coarse){
  /* Native mobile controls must not inherit the smaller label or toolbar fonts. */
  :root :is(input:not([type=checkbox]):not([type=radio]),textarea,select){font-size:max(16px,var(--text-base))}
}