/* System footer and the phone menu: presentation only, no model state. */
html,body { background:var(--bg); }
#themeButton { border-radius:50%; }
@media(min-width:721px) and (max-width:1000px) {
  .topbar { gap:12px; }
}
#systemPanel { grid-template-rows:auto auto minmax(0,1fr) max-content; }
.system-selection { display:grid;grid-template-rows:1fr;min-height:0;min-width:0;overflow:hidden;opacity:1;visibility:visible;transition:grid-template-rows .3s ease,opacity .3s ease,visibility .3s; }
.system-selection-inner { min-width:0;min-height:0;overflow:hidden; }
.system-selection[data-empty="true"] {grid-template-rows:0fr;opacity:0;visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){.system-selection{transition:none}}
@media(max-width:720px) {
  .top-nav { display:none; }
  html,body { overscroll-behavior-y:none; }
  .top-actions > :not(#mobileMenuButton) { display:none !important; }
  .top-actions #mobileMenuButton { display:grid; place-items:center; width:44px; height:44px; min-height:44px; padding:0; }
  .catalog-panel { border-radius:var(--radius-lg); }
  .catalog-list { border-radius:0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px); }
  /* Round the real scroller, not a painted strip. Full-width controls remain. */
  html[data-page="composer"] .page-viewport { clip-path:var(--catalog-clip,none); }
  .mobile-menu-open .page-viewport { overflow:hidden; }
  /* Keep device-safe areas and the outer canvas solid, independent of scroll. */
  .ambient-surface { top:env(safe-area-inset-top); bottom:env(safe-area-inset-bottom); mask-image:linear-gradient(transparent,#000 64px,#000 calc(100% - 64px),transparent); }
}
@media print { .top-nav { display:none; } }

@media(max-height:600px) {
  #systemPanel:has(#profileReveal:not([hidden])) .scenario-panel {
    max-height:max(110px,calc(100dvh - 330px - env(safe-area-inset-bottom)));
    overflow-y:auto;
    scrollbar-width:thin;
  }
}

.capability-panel .scenario-panel{padding-inline:0;padding-bottom:0}