.mobile-header, .mobile-nav, .mobile-sheet-controls { display: none; }
.layout-choice { flex: none; max-width: 110px; height: 22px; font-size: 11px; color: var(--text); background: var(--panel); border: 1px solid var(--line); }
/* Width chooses presentation, never a different editing engine. */
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor {
  --mobile-bottom: calc(92px + env(safe-area-inset-bottom));
  grid-template-columns: 0 0 minmax(0, 1fr) 0 !important;
  grid-template-rows: 52px minmax(0, 1fr) 64px calc(28px + env(safe-area-inset-bottom));
  grid-template-areas: "header header header header" "canvas canvas canvas canvas" "nav nav nav nav" "status status status status";
}
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .touch-actions { display: none; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .mobile-header {
  grid-area: header; display: flex; align-items: center; gap: 2px; padding: 0 6px;
  background: var(--panel); border-bottom: 1px solid var(--line); min-width: 0;
}
.mobile-header button, .mobile-sheet-controls button {
  min-width: 44px; height: 44px; flex: none; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; font: inherit; touch-action: manipulation;
}
.mobile-header button[data-touch-command] { font-size: 22px; }
.mobile-brand { flex: 1; min-width: 0; font-weight: 600; padding: 0 6px; }
.mobile-header .mobile-export { font-size: 12px; padding: 0 8px; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .mobile-nav {
  display: flex; grid-area: nav; background: var(--panel); border-top: 1px solid var(--line); z-index: 50;
}
.mobile-nav button {
  flex: 1 1 0; min-width: 0; border: 0; background: none; color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font: inherit; font-size: 11px; touch-action: manipulation;
}
.mobile-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.mobile-nav button[aria-expanded="true"] { background: var(--panel2); color: #8bb8ff; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor:not([data-mobile-section="none"]) .mobile-sheet-controls {
  display: flex; position: absolute; top: 84px; right: 8px; gap: 6px; z-index: 65;
}
.mobile-sheet-controls button { padding: 0 12px; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor :is(.panels-collapsed-strip, .left-dock, .panels-resize, .touch-actions) { display: none !important; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor .menubar {
  display: none; position: fixed; top: 56px; left: 8px; right: 8px; z-index: 75;
  flex-wrap: wrap; height: auto; padding: 6px; --pan: 0px !important;
}
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor[data-mobile-section="menu"] .menubar { display: flex; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .menubar > .brand { display: none; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .menu-item { min-height: 44px; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor .toolbar {
  display: none; position: fixed; inset: auto 8px var(--mobile-bottom) 8px !important;
  width: auto !important; height: 72px; max-height: 72px; transform: none !important;
  flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start;
  gap: 6px; padding: 8px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; z-index: 55;
  border: 1px solid var(--line); border-radius: 10px;
}
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor:is([data-mobile-section="select"], [data-mobile-section="paint"], [data-mobile-section="text"]) .toolbar { display: flex; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor .toolbar :is(.toolbar-head, .tool-bottom, .mobile-other-tool) { display: none !important; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor .tool { width: 44px; height: 44px; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor .color-well-row { flex: 0 0 auto; margin: 0; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor .optionsbar {
  display: none; position: fixed; inset: auto 8px var(--mobile-bottom) 8px;
  height: auto; max-height: 45dvh; min-height: 64px; overflow: auto; flex-wrap: wrap;
  padding: 12px; border: 1px solid var(--line); border-radius: 10px; z-index: 55; --pan: 0px !important;
  touch-action: pan-y;
}
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor[data-mobile-section="settings"] .optionsbar { display: flex; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .optionsbar .opt-group { flex-wrap: wrap; white-space: normal; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor .panels {
  display: none !important; position: fixed !important; inset: auto 8px var(--mobile-bottom) 8px !important;
  width: auto !important; height: min(45dvh, 440px) !important; max-height: 45dvh;
  overflow: auto; z-index: 55; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
}
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]).panel-flyout .editor .panels { display: flex !important; flex-direction: column; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .panels .dock-column { display: contents !important; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .panels :is(.col-head, .dock-split, .panel-collapse-row) { display: none !important; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .panels .panel-dock { display: none !important; position: static !important; width: auto !important; max-height: none; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"])[data-flyout-dock="a"] .panels .panel-dock[data-dock="a"] { display: flex !important; flex: 1; min-height: 0; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"])[data-flyout-dock="b"] .panels .panel-dock[data-dock="b"] { display: flex !important; flex: 1; min-height: 0; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"])[data-flyout-dock="c"] .panels .panel-dock[data-dock="c"] { display: flex !important; flex: 1; min-height: 0; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"])[data-flyout-dock="d"] .panels .panel-dock[data-dock="d"] { display: flex !important; flex: 1; min-height: 0; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"])[data-flyout-dock="e"] .panels .panel-dock[data-dock="e"] { display: flex !important; flex: 1; min-height: 0; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor .float-stack {
  display: none; position: fixed; inset: auto 8px var(--mobile-bottom) 8px !important;
  transform: none !important; width: auto; max-width: none; max-height: 45dvh; overflow: auto; z-index: 55;
}
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor[data-mobile-section="ai"] .float-stack,
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor .float-stack:has(.ai-float:not([hidden])) { display: flex; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .ai-tasks { flex-wrap: wrap; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor .float-panel {
  top: auto !important; left: 8px !important; bottom: var(--mobile-bottom) !important;
  width: calc(100vw - 16px) !important; max-height: 45dvh; overflow: auto;
}
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor .modal { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .status-right { display: none; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor input:not([type=checkbox]):not([type=radio]):not([type=range]),
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor select { font-size: 16px; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor :is(.tool-flyout button, .dropdown button, .task-btn, .layer-row) { min-height: 44px; }
body[data-editor-layout="tablet"] .editor .toolbar { right: auto !important; max-width: calc(100vw - 16px); }
body[data-editor-layout="tablet"] .editor .panels { left: auto !important; width: 360px !important; }
body[data-editor-layout="tablet"] .editor .optionsbar { left: auto; width: 400px; }

body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor[data-mobile-section="menu"] .mobile-sheet-controls { display: none; }
.mobile-header svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }

body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor .float-panel:not(.mobile-active-float) { display: none; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .editor[data-mobile-floating="true"] .panels { display: none !important; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .float-panel.mobile-active-float .float-body:not(.mobile-active-float) { display: none; }
body:is([data-editor-layout="mobile"], [data-editor-layout="tablet"]) .float-panel.mobile-active-float .float-body.mobile-active-float { display: block !important; overflow: auto; }