/* Approved mobile hierarchy. All colors and form controls use the base tokens. */
.mobile-workshop-head,.mobile-workshop-logo,.mobile-menu-groups,.mobile-navigation-balance,.mobile-tab-label,.mobile-navigation-dot,.mobile-chat-actions {display:none}
.mobile-billing-owner{display:none}
.workspace-choice[hidden]{display:none!important}
@media(max-width:760px),(max-height:500px) and (pointer:coarse){
 body[data-mobile-workspace] .mobile-workshop-head:has(.workspace-choice:not([hidden])){flex-wrap:wrap}
 body[data-mobile-workspace] .workspace-choice:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1 0 100%;grid-column:1 / -1;order:10;width:100%;min-width:0;margin:0;padding:4px 6px 8px;color:var(--ui-text-muted);font-size:12px;font-weight:500;box-sizing:border-box}
 body[data-mobile-workspace] .workspace-choice select{box-sizing:border-box;flex:1;min-width:0;max-width:230px;min-height:44px;margin:0;padding:8px 12px;border:1px solid var(--ui-control-border);border-radius:10px;background:var(--ui-surface);color:var(--ui-text);font-size:14px;text-overflow:ellipsis}
 body[data-mobile-workspace] .workspace-choice select:focus-visible{outline:2px solid var(--ui-action);outline-offset:2px}
}
.mobile-workshop-dialog {padding:0;width:min(900px,calc(100vw - 24px));max-height:calc(var(--app-h,100dvh) - 24px);border:1px solid var(--ui-control-border);border-radius:18px;background:var(--ui-surface);color:var(--ui-text);overflow:hidden}
.mobile-workshop-dialog[open]{display:flex;flex-direction:column}
.mobile-workshop-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;flex:none;border-bottom:1px solid var(--ui-divider)}
.mobile-workshop-dialog h2{margin:0;font-size:18px}
.mobile-workshop-dialog-body{overflow:auto;min-height:0;padding:16px;overscroll-behavior:contain}
.mobile-workshop-dialog-body>.card{margin:0!important;max-height:none!important}
.mobile-workshop-dialog-body>.atelier-recentes>h2>button{display:none}
.mobile-code-settings{display:grid;gap:14px}
.mobile-local-action{display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px;flex:0 0 44px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--ui-text);cursor:pointer}
.mobile-local-action svg{width:21px;height:21px}
@media (max-width:760px),(max-height:500px) and (pointer:coarse){
 body[data-mobile-workspace]>.phone{position:fixed;inset-inline:0;top:var(--studio-visible-top,0px);height:var(--studio-visible-height,100dvh);min-height:0;max-width:none;box-sizing:border-box;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
 body[data-mobile-workspace] #appTopbar.common-header{display:contents!important}
 body[data-mobile-workspace] #appTopbar>.common-header-inner{display:none!important}
 body[data-mobile-workspace]>.phone>main{padding:0!important;overflow:hidden;background:var(--ui-bg);min-height:0;flex:1}
 body[data-mobile-workspace] main>.screen:not([hidden]):not(#s-chat){height:100%;overflow:auto;padding:0 12px 16px;overscroll-behavior:contain}
 body[data-mobile-workspace] main>.screen>.studio-page-hero,
 body[data-mobile-workspace] #s-chain .workflow-head{display:none!important}
 body[data-mobile-workspace] .mobile-workshop-head{position:sticky;top:0;z-index:5;display:flex;flex:none;align-self:stretch;box-sizing:border-box;width:calc(100% + 4px);align-items:center;gap:2px;min-height:52px;margin:0 -2px 6px;padding:4px 0;background:var(--ui-bg);box-shadow:none;border:0}
 body[data-mobile-workspace] .mobile-workshop-head>strong{font-size:15px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:6px}
 .mobile-workshop-logo{display:inline-grid;place-items:center;width:44px;height:44px;min-width:44px;flex:0 0 44px;border-radius:10px;text-decoration:none}
 .mobile-workshop-logo img{display:block;width:25px;height:34px;object-fit:cover}
 body[data-mobile-workspace] #s-chat .chat-main{padding-top:0}
 body[data-mobile-workspace] #s-chat .chat-main-head{grid-template-columns:44px 44px minmax(0,1fr) 44px;min-height:52px}
 body[data-mobile-workspace] #s-chat #chatMoreButton{display:none!important}
 body[data-mobile-workspace] #s-chat .chat-main-head>.mobile-workshop-logo{grid-column:2;grid-row:1}
 body[data-mobile-workspace] #s-chat .chat-main-head>.chat-model-card{grid-column:3;grid-row:1}
 body[data-mobile-workspace] #s-chat .chat-main-head>#newChat{grid-column:4;grid-row:1}
 body[data-mobile-workspace] .mobile-chat-actions:not([hidden]){display:block;margin-top:16px;border:1px solid var(--ui-divider);border-radius:12px;padding:12px}
 .mobile-chat-actions>summary{font-size:13px;cursor:pointer}
 .mobile-chat-actions .chat-secondary-action{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:44px;width:100%;padding:10px;border:0;background:transparent;color:var(--ui-text);font:inherit;text-align:start}
 .mobile-chat-actions .chat-secondary-action svg{width:19px;height:19px;flex:none}
 body[data-mobile-workspace] #tabbar{flex:none;min-height:64px;max-height:none;gap:2px;padding:5px 6px max(7px,env(safe-area-inset-bottom))}
 body[data-mobile-workspace] #tabbar .mobile-navigation-balance{display:block;position:static;width:auto;max-width:100%;height:auto;clip-path:none;overflow:hidden;text-overflow:ellipsis;font-size:10px;line-height:1.35;font-weight:600;letter-spacing:-.3px;white-space:nowrap;color:var(--ui-link);font-variant-numeric:tabular-nums}
 body[data-mobile-workspace] #tabbar .mobile-tab-label{display:block;position:static;width:auto;max-width:100%;height:auto;clip-path:none;overflow:hidden;text-overflow:ellipsis;font-size:10px;line-height:1.35;font-weight:600;letter-spacing:-.2px;white-space:nowrap}
 body[data-mobile-workspace] #tabbar>button:not(#studioMoreWorkshops){gap:1px}
 body[data-mobile-workspace] #tabbar #studioMoreWorkshops{gap:0;padding:4px 1px;position:relative}
 body[data-mobile-workspace] #tabbar #studioMoreWorkshops>svg{width:19px;height:19px}
 body[data-mobile-workspace] .mobile-navigation-dot:not([hidden]){display:block;position:absolute;inset:5px 20% auto auto;width:6px;height:6px;border-radius:50%;background:var(--ui-action);box-shadow:0 0 0 2px var(--ui-surface)}
 body[data-mobile-workspace] #appTopbar #commonHeaderMenu{position:fixed;inset:auto 10px calc(72px + env(safe-area-inset-bottom));width:auto;max-width:420px;margin-inline:auto;max-height:var(--common-menu-max-height,calc(var(--studio-visible-height,100dvh) - 90px));padding:8px 12px 12px;border-radius:22px;z-index:1100;background:var(--ui-surface);color:var(--ui-text);box-shadow:0 16px 70px #0006}
 body[data-mobile-workspace] #commonHeaderMenu>.common-menu-section{display:none!important}
 body[data-mobile-workspace] .mobile-menu-groups:not([hidden]){display:block}
 .mobile-menu-group{margin:14px 0 0;padding:0;border:0;background:none}
 .mobile-menu-group>h3{font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-text-muted);margin:0 8px 5px}
 .mobile-menu-groups .common-menu-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
 .mobile-menu-groups .common-menu-items :is(a,button,label){min-width:0;max-width:100%;font-size:12px!important}
 .mobile-menu-groups .common-menu-items>.notification-bell{width:auto!important;justify-content:flex-start!important;gap:8px!important;padding:10px!important}
 .mobile-menu-groups .common-menu-items>.mobile-local-action{width:auto;height:auto;min-height:44px;display:flex;justify-content:flex-start;gap:10px;padding:10px}
 .mobile-menu-groups .mobile-notification-copy{display:inline;font-size:12px}
 .mobile-menu-groups .notification-count{position:static;margin-inline-start:auto}
 .mobile-other-workshops{grid-column:1/-1;min-width:0}
 .mobile-other-workshops>summary{min-height:44px;padding:11px 10px;font-size:12px;cursor:pointer;border-radius:10px}
 .mobile-other-workshops .common-menu-items{padding:4px 0}
 .mobile-credit-card{display:flex;align-items:center;gap:8px;border:1px solid var(--ui-divider);border-radius:14px;background:var(--ui-surface-raised);padding:10px;margin:5px 0 14px}
 body[data-mobile-workspace] #appTopbar .mobile-credit-card .common-credit{flex:1;min-width:0;max-width:100%;gap:0;padding:0;justify-content:flex-start!important;text-align:start}
 .mobile-credit-card .common-credit>svg{display:none}
 body[data-mobile-workspace] #appTopbar .mobile-credit-card #workspacePayer{display:block;max-width:190px;font-size:10px;color:var(--ui-text-muted)}
 body[data-mobile-workspace] #appTopbar .mobile-credit-card #pillBalance{font-size:17px;font-weight:650;color:var(--ui-text)}
 body[data-mobile-workspace] #appTopbar .mobile-credit-card #pillBalanceTnd{display:block;font-size:11px;color:var(--ui-text-muted)}
 body[data-mobile-workspace] #appTopbar.common-header .mobile-credit-card #topbarRecharge{display:inline-flex!important;min-width:44px;min-height:44px;padding:8px!important;border:1px solid var(--ui-control-border)!important;background:var(--ui-surface)!important;border-radius:11px;color:var(--ui-link)!important}
 body[data-mobile-workspace] #appTopbar .mobile-credit-card #topbarRecharge>span{display:inline!important;font-size:11px}
 body[data-mobile-workspace] #appTopbar .common-menu-heading{background:var(--ui-surface)}
 body[data-mobile-workspace] :is(#s-image,#s-video,#s-audio,#s-mesh3d):not([hidden]){display:flex!important;flex-direction:column;padding-bottom:10px;overflow:hidden}
 body[data-mobile-workspace] :is(#s-image,#s-video,#s-audio,#s-mesh3d)>.atelier-resultat,
 body[data-mobile-workspace] :is(#s-image,#s-video,#s-audio,#s-mesh3d)>.atelier-recentes{display:none!important}
 body[data-mobile-workspace] .media-controls{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;padding:0!important;border:0!important;border-radius:0;background:transparent;box-shadow:none;margin:0!important}
 body[data-mobile-workspace] .mobile-workshop-fields{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 2px 8px;scrollbar-width:thin}
 body[data-mobile-workspace] .mobile-workshop-fields>h2{display:none}
 body[data-mobile-workspace] .mobile-workshop-fields>.hint{display:none}
 body[data-mobile-workspace] .workshop-composer .provider-picker-trigger{min-height:44px;padding:8px 10px}
 body[data-mobile-workspace] .workshop-composer .provider-model-picker{margin-bottom:12px}
 body[data-mobile-workspace] .workshop-composer textarea{min-height:88px!important;margin-bottom:12px;font-size:16px}
 body[data-mobile-workspace] .workshop-launch{flex:none;margin:0;padding:8px 0 0;border:0;background:transparent}
 body[data-mobile-workspace] .workshop-launch .workshop-price-note{font-size:12px;margin-bottom:0}
 body[data-mobile-workspace] .workshop-price{font-size:12px}
 body[data-mobile-workspace] .mobile-notification-options{margin-top:12px;border:1px solid var(--ui-divider);border-radius:12px;padding:0 10px;font-size:12px}
 body[data-mobile-workspace] .mobile-notification-options[open]{padding-bottom:10px}
 body[data-mobile-workspace] #pcGuide>summary{box-sizing:border-box;min-height:44px;padding-block:10px}
 .mobile-notification-options>summary{box-sizing:border-box;min-height:44px;padding-block:10px;line-height:24px;cursor:pointer}
 body[data-mobile-workspace] .mobile-notification-options .notification-task{font-size:12px;padding:10px 0 0;margin:0;color:var(--ui-text)}
 body[data-mobile-workspace] .media-controls>[id$=Msg]:not(:empty){max-height:90px;overflow:auto;flex:none}
 body[data-mobile-workspace] #s-code .code-workspace{display:flex;flex-direction:column}
 body[data-mobile-workspace] #s-code .monaco-host{height:240px;min-height:200px}
 body[data-mobile-workspace] #s-code .extension-download-card{display:none}
 body[data-mobile-keyboard] #tabbar{display:none!important}
 body[data-mobile-keyboard] #appTopbar #commonHeaderMenu{bottom:8px}
 html[data-ui] body[data-mobile-workspace] #s-chat #chatWebToggle{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0;padding:0!important;width:44px;height:44px;min-width:44px;flex:0 0 44px;line-height:1}
 body[data-mobile-workspace] #chatWebToggle::before{position:absolute;left:50%;right:auto;top:50%;transform:translate(-50%,-50%);margin:0}
 body[data-mobile-workspace] .mobile-billing-owner:not([hidden]){display:inline-block;min-width:0;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:var(--ui-text-muted)}
}
/* Landscape phones: the form and its price scroll together; the tab bar gets shorter. */
@media (max-height:500px) and (pointer:coarse){
 body[data-mobile-workspace] .media-controls{overflow-y:auto;overscroll-behavior:contain}
 body[data-mobile-workspace] .mobile-workshop-fields{flex:none;overflow:visible}
 body[data-mobile-workspace] #tabbar{min-height:52px;padding-block:3px max(4px,env(safe-area-inset-bottom))}
 body[data-mobile-workspace] nav.tabbar#tabbar>button{min-height:44px}
 body[data-mobile-workspace] .mobile-workshop-head{min-height:46px;margin-bottom:2px;padding-block:1px}
}

/* The phone frame owns safe areas; its scrolling children must not shrink. */
@media(max-width:760px),(max-height:500px) and (pointer:coarse){
 body[data-mobile-workspace]>.phone{padding-top:env(safe-area-inset-top,0px)}
 body[data-mobile-workspace] main>.screen:not([hidden]):not(#s-chat){scroll-padding-block:64px 20px}
 body[data-mobile-workspace] main>.screen.project-workshop:not([hidden]){padding-bottom:88px}
 body[data-mobile-workspace] #appTopbar #commonHeaderMenu{box-sizing:border-box;max-width:min(420px,calc(100vw - 20px));overflow-x:hidden}
 body[data-mobile-workspace] #commonHeaderMenu #mobileLogout{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:10px;border:0;border-radius:9px;background:transparent;color:inherit;font:500 12px/1.4 var(--font-ui,Inter,sans-serif);text-align:start;cursor:pointer}
 body[data-mobile-workspace] #commonHeaderMenu #mobileLogout>svg{width:21px;height:21px;flex:none}
 body[data-mobile-workspace] #commonHeaderMenu #mobileLogout:focus-visible{outline:2px solid var(--ui-action);outline-offset:-2px}
 body[data-mobile-workspace] #commonHeaderMenu #mobileLogout:hover{background:var(--ui-surface-raised)}
 body[data-mobile-workspace] #commonHeaderMenu .common-menu-items{grid-template-columns:minmax(0,1fr)}
 body[data-mobile-workspace] .workshop-operations:has([data-audio-record]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-mobile-workspace] .workshop-operations button{overflow-wrap:normal;word-break:normal}
}