/* Phone workbench: existing semantic tokens and image geometry are preserved. */
#mobileEditorBar, .mobile-sheet-head, #mobileResultActions, #mobileCompareBtn { display: none; }
body.mobile-studio { overflow: hidden; overscroll-behavior: none; }
body.mobile-studio > .appbar { display: none !important; }
body.mobile-studio #studioView.focused-editor[data-stage="create"] {
  position: fixed; inset: var(--mobile-viewport-top, 0px) 0 auto; z-index: 40;
  width: 100%; height: var(--mobile-viewport-height, 100dvh); overflow: hidden;
  display: flex; flex-direction: column; background: var(--bg); padding: 0; margin: 0;
}
body.mobile-studio #mobileEditorBar { display: flex; align-items: center; gap: 2px; flex: none; min-height: 56px; padding: env(safe-area-inset-top, 0px) 8px 0; background: var(--card); border-bottom: 1px solid var(--border); z-index: 30; }
#mobileEditorBar button, #mobileEditorBar summary { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px; background: transparent; color: var(--text); cursor: pointer; }
#mobileEditorBar button:disabled { opacity: .35; }
#mobileEditorBar .ri-icon { width: 21px; height: 21px; }
.mobile-editor-heading { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; padding-left: 3px; }
.mobile-editor-heading strong { font-size: 15px; font-weight: 600; }
.mobile-editor-heading span { font-size: 11px; color: var(--muted-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mobileMoreMenu { position: relative; }
#mobileMoreMenu summary { list-style: none; }
#mobileMoreMenu summary::-webkit-details-marker { display: none; }
.mobile-more-actions { position: absolute; top: 48px; right: 0; width: 184px; max-height: calc(var(--mobile-viewport-height, 100dvh) - 120px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
#mobileMoreMenu .mobile-more-actions button { display: block; width: 100%; padding: 0 12px; text-align: left; font-size: 13px; }
#mobileMoreMenu .mobile-more-actions button:hover { background: var(--field); }
#mobileMoreMenu [hidden] { display: none !important; }
body.mobile-studio #studioView.focused-editor[data-stage="create"] .workspace { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) var(--mobile-sheet-height,330px); flex: 1; gap: 0; height: auto !important; min-height: 0 !important; width: 100%; padding: 0; overflow: hidden; }
body.mobile-studio #studioView #creationSaveBar { display: none; }
body.mobile-studio #studioView.focused-editor[data-stage="create"] #inputPanel { grid-area: 1 / 1; height: 100%; min-height: 0; border: 0; border-radius: 0; background: var(--bg); }
body.mobile-studio #studioView.focused-editor[data-stage="create"] .reference-toolbar { display: none !important; }
body.mobile-studio #studioView.focused-editor[data-stage="create"] #dropzone { min-height: 0; background: var(--bg); }
body.mobile-studio #studioView.focused-editor[data-stage="create"] #previewWrap { min-height: 0; background: var(--bg); background-image: none; border-radius: 0; }
body.mobile-studio #studioView .generation-canvas-image { box-shadow: none; }
body.mobile-studio #studioView .reference-canvas-label, body.mobile-studio #studioView .generation-canvas-label, body.mobile-studio #studioView .canvas-edit-hint { display: none; }
body.mobile-studio #studioView.focused-editor[data-stage="create"] #remixCard,
body.mobile-studio #studioView.focused-editor[data-stage="create"] #remixCard.is-contextual {
  grid-area: 2 / 1; height: 100%; width: 100%; min-height: 0; max-height: none !important;
  border: 1px solid var(--border); border-bottom: 0; border-radius: 24px 24px 0 0; overflow: hidden;
  display: flex !important; position: relative !important; flex-direction: column; padding: 0; margin: 0;
}
body.mobile-studio #studioView .mobile-sheet-head { display: flex; flex: none; align-items: center; justify-content: space-between; min-height: 44px; padding: 2px 16px 0; }
#mobileSheetToggle { display: flex; flex: 1; align-items: center; justify-content: space-between; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; }
#mobileSheetToggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mobileSheetToggle .ri-icon { color: var(--muted-strong); width: 18px; height: 18px; flex: none; }
#mobileKeyboardDone { min-height: 44px; min-width: 64px; margin-left: 8px; border: 0; border-radius: 14px; background: var(--action); color: var(--on-action); font: inherit; font-weight: 600; }
#mobileKeyboardDone[hidden] { display: none; }
body.mobile-studio #studioView.focused-editor #remixCard .context-panel-head { min-height: 0; padding: 0 16px; position: absolute; right: 38px; top: 3px; }
body.mobile-studio #studioView #remixCard .context-panel-head > div:first-child { display: none; }
body.mobile-studio #studioView #remixCard .context-panel-head #contextClose { display: none !important; }
body.mobile-studio #studioView.focused-editor[data-stage="create"] #remixCard .context-panel-head { min-height: 0; padding: 0; right: 38px; top: 2px; }
body.mobile-studio #studioView #contextActionMenu summary { min-height: 44px; min-width: 44px; }
body.mobile-studio #studioView.is-editing-element #mobileSheetToggle { padding-right: 50px; }
body.mobile-studio #studioView.focused-editor #remixCard .context-panel-scroll,
body.mobile-studio #studioView.focused-editor[data-edit-target="none"] #remixCard[data-browse-mode="idle"] .context-panel-scroll { flex: 1 1 auto; min-height: 0; padding: 8px 16px; overflow: auto; overscroll-behavior: contain; scroll-padding: 8px; }
body.mobile-studio #studioView #remixCard .editor-panel-nav { margin: 0 16px; padding: 3px; border-radius: 14px; }
body.mobile-studio #studioView #remixCard .editor-panel-nav button { min-height: 44px; border-radius: 11px; font-size: 13px; }
body.mobile-studio #studioView.focused-editor.is-editing-element[data-stage="create"] #remixCard .editor-panel-nav { display: none !important; }
body.mobile-studio #studioView #remixCard .context-scope { display: none; }
body.mobile-studio #studioView #contextFields { gap: 10px !important; }
body.mobile-studio #studioView #remixCard :is(input,textarea,select) { font-size: 16px; min-height: 44px; border-radius: 14px; }
body.mobile-studio #studioView #remixCard textarea { min-height: 66px; resize: none; }
body.mobile-studio #studioView #remixCard button { touch-action: manipulation; }
body.mobile-studio #studioView #remixCard .context-done-bar { padding: 0; min-height: 0; }
body.mobile-studio #studioView.focused-editor[data-stage="create"] #sameStyleActionBar { flex: none; padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 4px; border-top: 1px solid var(--border); }
body.mobile-studio #studioView #sameStyleActionBar .generation-action { gap: 6px; }
body.mobile-studio #studioView #sameStyleActionBar .selection-summary { min-height: 0; gap: 2px; }
body.mobile-studio #studioView #changeCount { min-height: 24px; font-size: 11px; }
body.mobile-studio #studioView #editorEditMenu > summary { min-height: 24px; }
body.mobile-studio #studioView #generateActionHint { font-size: 11px; margin: 0; }
body.mobile-studio #studioView #generationEditSummary { display: none; }
body.mobile-studio #studioView #genStatus:not(.hidden) { max-height: 50px; overflow: auto; padding: 2px 0; font-size: 12px; }
body.mobile-studio #studioView .canvas-zoom-controls { left: 12px !important; bottom: 7px !important; border: 0 !important; background: var(--card); border-radius: 14px !important; height: 44px; }
body.mobile-studio #studioView .canvas-zoom-controls button { min-height: 44px; min-width: 44px; font-size: 12px; }
body.mobile-studio #studioView #mobileCompareBtn:not([hidden]) { display: flex; align-items: center; gap: 6px; position: absolute; z-index: 6; right: 12px; bottom: 7px; min-height: 44px; border: 1px solid var(--border); border-radius: 14px; padding: 0 12px; background: var(--card); color: var(--text); font-size: 12px; touch-action: manipulation; }
body.mobile-studio #studioView.focused-editor #generationCanvasVersionStrip:not(.hidden) { left: 12px; right: 12px; bottom: 60px; max-width: calc(100% - 24px); width: max-content; }
body.mobile-studio #studioView.mobile-sheet-collapsed #remixCard > :not(.mobile-sheet-head):not(#sameStyleActionBar) { display: none !important; }
body.mobile-studio #studioView.mobile-sheet-collapsed #sameStyleActionBar :is(.selection-summary,#generateActionHint) { display: none !important; }
body.mobile-studio #studioView.mobile-sheet-collapsed #mobileSheetToggle .ri-icon { transform: rotate(180deg); }
body.mobile-studio #studioView.mobile-result #remixCard > :not(#mobileResultActions) { display: none !important; }
body.mobile-studio #studioView.mobile-result #mobileResultActions { display: flex; flex-direction: column; padding: 10px 16px calc(10px + env(safe-area-inset-bottom,0px)); gap: 8px; height: 100%; box-sizing: border-box; }
.mobile-result-status { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; color: var(--muted-strong); margin: 0; }
.mobile-result-status .ri-icon { width: 16px; height: 16px; }
#mobileResultActions button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--field); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
#mobileResultActions #mobileSaveBtn { min-height: 48px; background: var(--action); color: var(--on-action); border-color: transparent; }
#mobileResultFailure { display: flex; flex-direction: column; gap: 8px; }
#mobileResultFailure[hidden] { display: none; }
#mobileResultError { margin: 0; max-height: 42px; overflow-y: auto; font-size: 12px; line-height: 1.7; color: var(--text); }
#mobileResultActions #mobileResultRetry { background: var(--action); color: var(--on-action); border-color: transparent; }
#mobileResultActions.has-generation-error #mobileSaveBtn { background: var(--field); color: var(--text); border-color: var(--border); }
#mobileResultActions button:disabled { opacity: .5; cursor: default; }
body.mobile-studio #studioView.mobile-peek #preview { visibility: visible; }
body.mobile-studio #studioView.mobile-peek #generationCanvasLayer { visibility: hidden; }
body.mobile-studio #studioView.mobile-peek #referenceOverlay { visibility: hidden; }
body.mobile-studio.mobile-keyboard #studioView #remixCard > .editor-panel-nav,
body.mobile-studio.mobile-keyboard #studioView #remixCard > .context-scope,
body.mobile-studio.mobile-keyboard #studioView #remixCard > .context-panel-head,
body.mobile-studio.mobile-keyboard #studioView #sameStyleActionBar,
body.mobile-studio.mobile-keyboard #studioView #remixCard .context-panel-scroll { padding-top: 0; }
body.mobile-studio.mobile-keyboard #studioView .editor-settings { display: none; }
body.mobile-studio.mobile-keyboard #studioView .canvas-zoom-controls,
body.mobile-studio.mobile-keyboard #studioView #mobileCompareBtn { display: none !important; }
body.mobile-studio #studioView.focused-editor.mobile-landscape[data-stage="create"] .workspace { grid-template-columns: minmax(0,1fr) 320px; grid-template-rows: minmax(0,1fr); }
body.mobile-studio #studioView.mobile-landscape #remixCard { grid-area: 1 / 2 !important; border-radius: 18px 0 0 0 !important; }
body.mobile-studio #studioView.mobile-landscape #inputPanel { grid-area: 1 / 1; }
body.mobile-studio :is(#mobileEditorBar,.mobile-sheet-head,#mobileResultActions) button:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
body.mobile-studio :is(#mobileEditorBar,.mobile-sheet-head,#mobileResultActions) button:active:not(:disabled) { transform: scale(.97); }
@media(prefers-reduced-motion:reduce) { body.mobile-studio :is(#mobileEditorBar,.mobile-sheet-head,#mobileResultActions) button:active { transform: none; } }