/* Phones: the conversation keeps the screen. Loaded last so it settles the studio's phone layout. */
/* Wide view (phones without the Fullscreen API): the site bar steps aside inside the editor. */
html.studio-focus body:has(#studio-editor) #app>header{display:none}
html.studio-focus body:has(#studio-editor) #main{padding-top:env(safe-area-inset-top)}
@media(max-width:760px){
 html.studio-focus #studio-editor .studio-back{display:inline-flex;font-size:13px}
 #studio-editor .studio-toolbar{gap:6px;padding-bottom:6px}
 #studio-editor .studio-toolbar>div:first-child{display:flex;align-items:center;gap:8px;min-width:0}
 #studio-editor .studio-toolbar>div:first-child strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
 /* One swipeable row of tools instead of two wrapped rows. */
 #studio-editor .studio-toolbar .actions{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -12px;padding:0 12px 2px;mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
 #studio-editor .studio-toolbar .actions::-webkit-scrollbar{display:none}
 #studio-editor .studio-toolbar .actions>*{flex:none}
 #studio-editor .studio-toolbar .actions .btn{min-height:34px;padding-block:0;white-space:nowrap}
 #studio-editor .studio-workspace-meta{min-height:24px}
 #studio-editor .studio-mobile-tabs{margin-bottom:6px}
 #studio-editor .studio-chat-heading{padding:5px 10px}
 #studio-editor .studio-chat-save{display:none}
 #studio-editor[data-density] #studio-ai-prompt{min-height:48px;max-height:30vh}
 #studio-editor .studio-response-mode{min-height:0}
 /* The feedback button shrinks to an icon so it never sits on the request box. */
 body:has(#studio-editor) .feedback-launcher{font-size:0;gap:0;width:44px;height:44px;padding:0;justify-content:center;bottom:max(12px,env(safe-area-inset-bottom));opacity:.85}
 body:has(#studio-editor) .feedback-launcher .ui-icon{width:20px;height:20px}
}