/* Phone and tablet layout: one page scroller and compact editor navigation. */
.mobile-section-picker,.sidebar-mobile-close{display:none}
.app-shell .global-settings-nav .mobile-section-picker,dialog :is(.provider-editor-nav,.model-editor-nav) .mobile-section-picker{display:none}
body:has(dialog.provider-editor-dialog[open],dialog.customer-group-drawer[open]){overflow:hidden}
@media(max-width:820px){
  html{scroll-padding-top:64px}
  body.sidebar-open,body:has(dialog[open]){overflow:hidden}
  .app-shell .console-main,.app-shell .content-shell,.app-shell .view,.app-shell .admin-panel{min-width:0;max-width:100%}
  .app-shell .content-shell{padding:18px 12px calc(24px + env(safe-area-inset-bottom))}
  .app-shell .topbar{min-height:56px;padding:8px 12px;gap:8px}
  .app-shell .topbar-location{min-width:0;margin:0 auto 0 0;flex:1}
  .app-shell .topbar-location .breadcrumb{display:none}
  .app-shell #page-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
  .app-shell .topbar-actions{gap:8px;flex-shrink:0}
  .app-shell .balance-chip,.app-shell .user-button b{display:none}
  .app-shell .sidebar{width:min(300px,calc(100vw - 48px));height:100dvh;left:-100vw;padding-bottom:calc(12px + env(safe-area-inset-bottom));visibility:hidden;overflow-y:auto;overscroll-behavior:contain}
  body.sidebar-open .app-shell .sidebar{left:0;visibility:visible}
  .app-shell .sidebar-mobile-close{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;margin-left:auto;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#475569;font-size:24px}
  .app-shell .sidebar-header{margin-bottom:12px;flex-shrink:0}
  .app-shell .console-nav{min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .app-shell .sidebar-status{flex-shrink:0}
  [data-view-panel="admin"] .admin-view-heading{margin-bottom:12px}
  [data-view-panel="admin"] .admin-view-heading .eyebrow{display:none}
  [data-view-panel="admin"] .admin-view-heading h1{font-size:23px}
  [data-view-panel="admin"] .admin-view-heading p{font-size:12px;line-height:1.5}
  .admin-workspace-toolbar{padding:0 0 10px;margin-bottom:12px}
  .admin-workspace-favorites{display:none}
  .admin-workspace-tools{width:100%;gap:6px}
  .admin-quick-jump{margin-left:auto}
  .admin-quick-jump kbd{display:none}
  [data-view-panel="admin"] .admin-panel-heading>div:has(>h2){display:none}
  [data-view-panel="admin"] .admin-panel-heading:has(>.admin-panel-actions){margin-bottom:12px}
  [data-view-panel="admin"] .admin-panel-actions :is(.primary-button,.secondary-button){flex:0 1 auto;min-height:40px;max-width:100%}
  .admin-context-bar,.admin-filter-chips{margin-bottom:10px}
  [data-view-panel="admin"] .table-wrap{max-height:none;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
  [data-view-panel="admin"] table th,[data-view-panel="admin"] table .admin-cell-actions{position:static;box-shadow:none}
  [data-view-panel="admin"] table th,[data-view-panel="admin"] table td{padding:10px}
  [data-view-panel="admin"] .provider-bulk-bar{position:static}
  .app-shell .global-settings-nav,.admin-ui-dialog .provider-editor-nav,.admin-ui-dialog .model-editor-nav,dialog .provider-editor-nav{position:static;display:block;max-height:none;min-height:0;padding:8px 12px;overflow:visible;border-radius:8px}
  :is(.global-settings-nav,.provider-editor-nav,.model-editor-nav):has(.mobile-section-picker)>button,
  :is(.global-settings-nav,.provider-editor-nav,.model-editor-nav):has(.mobile-section-picker)>.admin-section-search{display:none!important}
  .app-shell .global-settings-nav .mobile-section-picker,dialog :is(.provider-editor-nav,.model-editor-nav) .mobile-section-picker{display:flex;align-items:center;gap:10px;margin:0;min-width:0}
  .mobile-section-picker>span{flex-shrink:0;color:#64748b;font-size:12px}
  .mobile-section-picker select{flex:1;min-width:0;width:100%;height:42px;padding:8px 10px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#182438;font-size:16px}
  .app-shell .global-settings-section{scroll-margin-top:70px}
  .app-shell .user-settings-sidebar{position:static}
  dialog{max-width:100vw;max-height:min(100dvh,var(--mobile-dialog-height,100dvh));overscroll-behavior:contain}
  dialog.provider-editor-dialog,dialog.customer-group-drawer{inset:0;width:100%;height:min(100dvh,var(--mobile-dialog-height,100dvh));max-height:100dvh;margin:0;border-radius:0}
  .provider-editor,.customer-group-form{min-height:0;max-height:100%;overflow:hidden}
  .provider-editor-header,.customer-group-drawer-header{min-height:58px;padding:10px 12px;gap:10px}
  .provider-editor-title,.customer-group-drawer-title{gap:8px}
  .provider-editor-title h2,.customer-group-drawer-title h2{font-size:17px;margin:0}
  .provider-editor-title p,.customer-group-drawer-title p{display:none}
  .provider-editor-close,.customer-group-drawer-header>.icon-button{width:40px;height:40px;flex-shrink:0}
  .provider-editor-layout{min-height:0;grid-template-rows:auto minmax(0,1fr)}
  .provider-editor-content,.customer-group-drawer-content{min-height:0;overscroll-behavior:contain;scroll-padding-block:12px}
  .provider-editor-footer{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  .provider-editor-footer>.dialog-error:empty{display:none}
  .provider-editor-footer>.dialog-error:not(:empty){flex-basis:100%;margin:0;max-height:56px;overflow:auto}
  .provider-editor-footer>div{width:auto;min-width:0;flex:1;flex-wrap:wrap}
  .provider-editor-footer>.model-delete-button{width:auto;flex:0 0 auto}
  .provider-editor-footer button{min-height:40px;white-space:normal}
  dialog .dialog-body{max-width:100%;max-height:calc(min(100dvh,var(--mobile-dialog-height,100dvh)) - 20px);overflow-y:auto;padding:16px}
  .app-shell input:not([type="checkbox"]):not([type="radio"]),.app-shell select,.app-shell textarea,dialog input:not([type="checkbox"]):not([type="radio"]),dialog select,dialog textarea{font-size:16px}
  .toast{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:none}
}
@media(max-width:560px){
  [data-view-panel="admin"] .admin-panel-actions>*{min-width:0}
  .app-shell .global-settings-section{padding:16px 12px}
  .app-shell .global-settings-section-heading{gap:10px;flex-wrap:wrap}
  .app-shell .global-settings-section-heading>div{min-width:0;flex:1}
  .provider-editor-section,.customer-group-drawer-content{padding:16px 12px}
  .channel-sniff-model,.channel-sniff-apply{min-width:0;max-width:100%;flex-basis:100%}
}
@media(max-width:820px) and (max-height:500px){
  .provider-editor-header{min-height:48px;padding-block:4px}
  .provider-editor-footer{padding-block:4px}
  .provider-editor-nav{padding-block:4px}
}

/* Keep supplier/channel forms usable above the phone keyboard. */
@media(max-width:820px){
  :is(#provider-dialog,#channel-dialog){top:var(--mobile-editor-viewport-top,0px);bottom:auto;height:var(--mobile-editor-viewport-height,100dvh);max-height:var(--mobile-editor-viewport-height,100dvh)}
  :is(#provider-dialog,#channel-dialog) .provider-editor{min-width:0;grid-template-rows:auto minmax(0,1fr) auto}
  :is(#provider-dialog,#channel-dialog) .provider-editor-header{min-height:56px;padding:8px 12px}
  :is(#provider-dialog,#channel-dialog) .provider-editor-title{flex:1;overflow:hidden}
  :is(#provider-dialog,#channel-dialog) .provider-editor-title>div{min-width:0}
  :is(#provider-dialog,#channel-dialog) .provider-editor-title h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  :is(#provider-dialog,#channel-dialog) .provider-editor-icon{width:28px;height:28px}
  :is(#provider-dialog,#channel-dialog) .provider-editor-layout{min-width:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);overflow:hidden}
  :is(#provider-dialog,#channel-dialog) .provider-editor-nav{padding:6px 12px;border-radius:0}
  :is(#provider-dialog,#channel-dialog) .mobile-section-picker select{height:40px;min-height:40px;padding-block:6px}
  :is(#provider-dialog,#channel-dialog) .provider-editor-content{min-width:0;overflow:auto;scroll-padding-block:12px;-webkit-overflow-scrolling:touch}
  :is(#provider-dialog,#channel-dialog) .provider-editor-section{min-width:0;align-content:start;gap:16px;padding:16px 12px}
  :is(#provider-dialog,#channel-dialog) .provider-editor-section:last-child{min-height:0}
  :is(#provider-dialog,#channel-dialog) :is(fieldset,.provider-field-grid,.provider-field-stack){min-width:0;max-width:100%}
  :is(#provider-dialog,#channel-dialog) .provider-field-grid{gap:14px}
  :is(#provider-dialog,#channel-dialog) .provider-section-heading{gap:8px}
  :is(#provider-dialog,#channel-dialog) .provider-section-heading>div{min-width:0}
  :is(#provider-dialog,#channel-dialog) .provider-section-heading>span{width:30px;height:30px}
  :is(#provider-dialog,#channel-dialog) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea){font-size:16px}
  :is(#provider-dialog,#channel-dialog) .provider-editor-footer{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));overflow:hidden}
  :is(#provider-dialog,#channel-dialog) .provider-editor-footer>div{width:100%;min-width:0;flex-wrap:nowrap}
  :is(#provider-dialog,#channel-dialog) .provider-editor-footer>.provider-editor-left-actions{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:2px}
  :is(#provider-dialog,#channel-dialog) .provider-editor-left-actions:not(:has(button:not([hidden]))){display:none}
  :is(#provider-dialog,#channel-dialog) .provider-editor-left-actions button{width:auto;min-height:36px;flex:0 0 auto;white-space:nowrap}
  :is(#provider-dialog,#channel-dialog) .provider-editor-footer>div:last-child button{min-width:0;min-height:44px;flex:1}
  :is(#provider-dialog,#channel-dialog) .provider-editor-footer>.dialog-error:not(:empty){width:100%;min-height:0;max-height:48px;overflow:auto;overflow-wrap:anywhere}
  :is(#provider-dialog,#channel-dialog).mobile-editor-keyboard .provider-editor-header{height:44px;min-height:44px;padding-block:2px}
  :is(#provider-dialog,#channel-dialog).mobile-editor-keyboard .provider-editor-nav,
  :is(#provider-dialog,#channel-dialog).mobile-editor-keyboard .provider-editor-left-actions{display:none}
  :is(#provider-dialog,#channel-dialog).mobile-editor-keyboard .provider-editor-layout{grid-template-rows:minmax(0,1fr)}
  :is(#provider-dialog,#channel-dialog).mobile-editor-keyboard .provider-editor-footer{padding-block:4px}
  :is(#provider-dialog,#channel-dialog).mobile-editor-keyboard textarea{min-height:80px;max-height:max(80px,calc(var(--mobile-editor-viewport-height,100dvh) - 152px))}
}

/* The keyboard resizes the visual viewport, which is not always the viewport
   used by dialog centering or dvh. Keep new and legacy form dialogs reachable
   without squeezing their fields between fixed headers and footers. */
@media(max-width:820px){
  /* Later feature styles must not shrink text fields below iOS's auto-zoom
     threshold; that zoom changes the viewport while the keyboard is opening. */
  :is(.app-shell,dialog) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea){font-size:16px!important}
  html.mobile-keyboard-open .app-shell .content-shell{padding-bottom:calc(24px + var(--mobile-keyboard-inset,0px) + env(safe-area-inset-bottom))}
  dialog[open].mobile-viewport-dialog.mobile-editor-keyboard:where(:not(#provider-dialog):not(#channel-dialog):not(#key-dialog)),
  dialog#resource-pack-dialog.mobile-editor-keyboard{
    top:calc(var(--mobile-editor-viewport-top,0px) + 8px);
    bottom:auto;
    height:auto;
    max-height:calc(var(--mobile-editor-viewport-height,100dvh) - 16px);
    margin-block:0;
    overflow-y:auto;
    scroll-padding-block:12px;
    -webkit-overflow-scrolling:touch;
  }
  dialog[open].mobile-viewport-dialog.mobile-editor-keyboard:where(:not(#provider-dialog):not(#channel-dialog):not(#key-dialog))>form,
  dialog[open].mobile-viewport-dialog.mobile-editor-keyboard:where(:not(#provider-dialog):not(#channel-dialog):not(#key-dialog)) :is(.customer-group-form,.provider-editor,.skills-dialog-scroll,.provider-editor-layout,.provider-editor-content,.admin-key-editor-content,.customer-group-drawer-content,.resource-pack-grant-content){
    display:block;
    height:auto;
    min-height:0;
    max-height:none;
    overflow:visible;
  }
  dialog[open].mobile-viewport-dialog.mobile-editor-keyboard:where(:not(#provider-dialog):not(#channel-dialog):not(#key-dialog)) .dialog-body{max-height:none;overflow:visible}
  dialog[open].mobile-viewport-dialog.mobile-editor-keyboard #provider-test-form{max-height:none;overflow:visible}
}