/* Final non-painting responsive layer. Loaded last so legacy desktop
   breakpoints cannot hide features or collapse the application shell. */
:root {
  --aiwb-safe-top: env(safe-area-inset-top, 0px);
  --aiwb-safe-right: env(safe-area-inset-right, 0px);
  --aiwb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --aiwb-safe-left: env(safe-area-inset-left, 0px);
  --aiwb-mobile-nav-height: 64px;
  --aiwb-visual-viewport-offset-top: 0px;
  --aiwb-visual-viewport-offset-left: 0px;
  --aiwb-visual-viewport-bottom-gap: 0px;
  --aiwb-visual-viewport-right-gap: 0px;
}

/* Vision composer keeps the reference thumbnail on the left on mobile too;
   the generic composer rail must not collapse it back into a top-right tray. */
@media (max-width: 720px) {
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] {
    min-height: 164px;
    padding: 9px !important;
  }
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] .vision-composer-body {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-rows: minmax(92px, auto) auto;
    gap: 7px;
  }
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] .vision-reference-slot {
    grid-column: 1;
    grid-row: 1;
  }
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] .dock-input-row {
    grid-column: 2;
    grid-row: 1;
  }
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] .dock-top {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] .dock-input-row textarea {
    min-height: 92px !important;
    max-height: 300px !important;
    resize: vertical;
  }
}


/* Last cascade layer for the vision composer: these declarations intentionally
   come after the legacy responsive rail rules above. */
.prompt-dock[data-composer='vision'] .dock-top {
  position: relative;
  z-index: 120;
  align-items: center;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}
.prompt-dock[data-composer='vision'] .dock-top:has(.select-control.open) {
  overflow: visible !important;
}
.prompt-dock[data-composer='vision'] .select-control { z-index: 121; }
.prompt-dock[data-composer='vision'] .select-control.open { z-index: 240; }
.prompt-dock[data-composer='vision'] .select-popover {
  z-index: 1000;
  pointer-events: auto;
}
.prompt-dock[data-composer='vision'] .dock-chip,
.prompt-dock[data-composer='vision'] .select-trigger,
.prompt-dock[data-composer='vision'] .credit-cost-chip,
.prompt-dock[data-composer='vision'] .mode-switch {
  height: 52px !important;
  min-height: 52px !important;
  box-sizing: border-box;
}
.prompt-dock[data-composer='vision'] .dock-chip,
.prompt-dock[data-composer='vision'] .select-trigger,
.prompt-dock[data-composer='vision'] .credit-cost-chip {
  padding-inline: 12px;
  border-radius: 12px;
}
.prompt-dock[data-composer='vision'] .mode-switch {
  padding: 4px;
  border-radius: 13px;
}
.prompt-dock[data-composer='vision'] .mode-switch-thumb {
  top: 4px;
  bottom: 4px;
  border-radius: 9px;
}
.prompt-dock[data-composer='vision'] .mode-switch button {
  min-height: 42px;
  border-radius: 9px;
}
.prompt-dock[data-composer='vision'] .dock-input-row textarea,
.mode-page[data-page='vision'].professional-tone .prompt-dock[data-composer='vision'] .dock-input-row textarea {
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  .prompt-dock[data-composer='vision'] .dock-top {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 0 !important;
  }
  .prompt-dock[data-composer='vision'] .dock-top:has(.select-control.open) {
    overflow: visible !important;
  }
  .prompt-dock[data-composer='vision'] .dock-chip,
  .prompt-dock[data-composer='vision'] .select-trigger,
  .prompt-dock[data-composer='vision'] .credit-cost-chip,
  .prompt-dock[data-composer='vision'] .mode-switch {
    height: 44px !important;
    min-height: 44px !important;
  }
  .prompt-dock[data-composer='vision'] .mode-switch {
    padding: 3px;
    border-radius: 11px;
  }
  .prompt-dock[data-composer='vision'] .mode-switch-thumb {
    top: 3px;
    bottom: 3px;
    border-radius: 8px;
  }
  .prompt-dock[data-composer='vision'] .mode-switch button {
    min-height: 36px;
    border-radius: 8px;
  }
}

/* Keep the reference add entry actionable above the stacked thumbnails on
   narrow screens as well; the newest thumbnail remains the top card. */
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray.has-reference .vision-reference-image {
  z-index: calc(20 + var(--ref-index, 0));
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray.has-reference > .reference-drop-card {
  z-index: 100;
  pointer-events: auto;
}

/* Mobile drawer is a crisp dimmed sheet.  Do not blur the whole application:
   the backdrop sits above content while the history pane stays interactive. */
@media (max-width: 720px) {
  .app:not(.painting-immersive-shell) > .history-pane { z-index: 920 !important; filter: none !important; backdrop-filter: none !important; }
  .drawer-backdrop { z-index: 900 !important; background: rgba(18, 26, 40, .22) !important; backdrop-filter: none !important; filter: none !important; }
  .drawer-backdrop.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
}

/* Keep the original tablet breakpoint contract while removing the blur that
   made the narrow drawer impossible to operate.  The narrower 720px rule
   above intentionally raises both layers further for phone-sized viewports. */
@media (max-width: 760px) {
  .app:not(.painting-immersive-shell) > .history-pane { z-index: 900 !important; filter: none !important; backdrop-filter: none !important; }
  .drawer-backdrop { z-index: 800 !important; backdrop-filter: none !important; filter: none !important; }
}

/* Vision composer rail interaction and alignment fixes.  Keep the rail above
   the prompt surface so upward select menus are not clipped by the horizontal
   scroller; the mobile rule below still uses the fixed viewport popover. */
.prompt-dock[data-composer='vision'] .dock-top {
  position: relative;
  z-index: 120;
  align-items: center;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}
.prompt-dock[data-composer='vision'] .dock-top:has(.select-control.open) {
  overflow: visible !important;
}
.prompt-dock[data-composer='vision'] .select-control {
  z-index: 121;
}
.prompt-dock[data-composer='vision'] .select-control.open {
  z-index: 240;
}
.prompt-dock[data-composer='vision'] .select-popover {
  z-index: 1000;
  pointer-events: auto;
}

/* Match every rail control to the send action's vertical rhythm. */
.prompt-dock[data-composer='vision'] .dock-chip,
.prompt-dock[data-composer='vision'] .select-trigger,
.prompt-dock[data-composer='vision'] .credit-cost-chip,
.prompt-dock[data-composer='vision'] .mode-switch {
  height: 52px !important;
  min-height: 52px !important;
  box-sizing: border-box;
}
.prompt-dock[data-composer='vision'] .dock-chip,
.prompt-dock[data-composer='vision'] .select-trigger,
.prompt-dock[data-composer='vision'] .credit-cost-chip {
  padding-inline: 12px;
  border-radius: 12px;
}
.prompt-dock[data-composer='vision'] .mode-switch {
  padding: 4px;
  border-radius: 13px;
}
.prompt-dock[data-composer='vision'] .mode-switch-thumb {
  top: 4px;
  bottom: 4px;
  border-radius: 9px;
}
.prompt-dock[data-composer='vision'] .mode-switch button {
  min-height: 42px;
  border-radius: 9px;
}

/* The prompt is a clean canvas; professional-tone's generic textarea skin
   must not reintroduce the pale grey field behind the copy. */
.mode-page[data-page='vision'].professional-tone
  .prompt-dock[data-composer='vision'] .dock-input-row textarea,
.prompt-dock[data-composer='vision'] .dock-input-row textarea {
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  .prompt-dock[data-composer='vision'] .dock-top {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 0 !important;
  }
  .prompt-dock[data-composer='vision'] .dock-top:has(.select-control.open) {
    overflow: visible !important;
  }
  .prompt-dock[data-composer='vision'] .dock-chip,
  .prompt-dock[data-composer='vision'] .select-trigger,
  .prompt-dock[data-composer='vision'] .credit-cost-chip,
  .prompt-dock[data-composer='vision'] .mode-switch {
    height: 44px !important;
    min-height: 44px !important;
  }
  .prompt-dock[data-composer='vision'] .mode-switch {
    padding: 3px;
    border-radius: 11px;
  }
  .prompt-dock[data-composer='vision'] .mode-switch-thumb {
    top: 3px;
    bottom: 3px;
    border-radius: 8px;
  }
  .prompt-dock[data-composer='vision'] .mode-switch button {
    min-height: 36px;
    border-radius: 8px;
  }
}

/* Vision controls open upward from the bottom rail.  The rail used to set
   overflow-x:auto while leaving overflow-y:visible; per CSS overflow rules
   that computes to auto on both axes and clips the popover at the prompt
   surface.  Keep the desktop rail visible so the model/resolution/count
   menus remain above the text area and receive pointer events. */
@media (min-width: 721px) {
  .prompt-dock[data-composer='vision'] .dock-top {
    position: relative;
    z-index: 120;
    overflow: visible;
  }
  .prompt-dock[data-composer='vision'] .dock-top .select-control.open {
    position: relative;
    z-index: 130;
  }
  .prompt-dock[data-composer='vision'] .dock-top .select-control.open .select-popover {
    z-index: 160;
    pointer-events: auto;
  }
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  height: var(--aiwb-visual-viewport-height, 100dvh);
}

.app:not(.painting-immersive-shell) {
  position: fixed;
  top: var(--aiwb-visual-viewport-offset-top);
  left: var(--aiwb-visual-viewport-offset-left);
  width: var(--aiwb-visual-viewport-width, 100vw);
  height: var(--aiwb-visual-viewport-height, 100dvh);
  max-height: var(--aiwb-visual-viewport-height, 100dvh);
}

.app:not(.painting-immersive-shell),
.app:not(.painting-immersive-shell) > .shell,
.app:not(.painting-immersive-shell) .stage,
.app:not(.painting-immersive-shell) .mode-page,
.app:not(.painting-immersive-shell) .mode-page > *,
.app:not(.painting-immersive-shell) .vision-tab,
.app:not(.painting-immersive-shell) .chat-mode-host,
.app:not(.painting-immersive-shell) .code-workspace,
.app:not(.painting-immersive-shell) .market-shell,
.app:not(.painting-immersive-shell) .video-v2-page {
  max-width: 100%;
  min-width: 0;
}

.app:not(.painting-immersive-shell) .mode-page {
  overflow-x: hidden;
}

.app:not(.painting-immersive-shell) :is(p, strong, small, span, label, button, summary) {
  overflow-wrap: anywhere;
}

/* A one-image generation is a full-width result; multi-image generations keep
   the existing two-column desktop/tablet grid. */
.mode-page[data-page='vision'] .generation-grid > :only-child {
  grid-column: 1 / -1;
  width: min(100%, 960px);
  justify-self: start;
}

@media (pointer: coarse) {
  .app:not(.painting-immersive-shell) button,
  .app:not(.painting-immersive-shell) select,
  .app:not(.painting-immersive-shell) input:not([type='radio']):not([type='checkbox']):not([type='range']),
  .app:not(.painting-immersive-shell) summary {
    min-height: 44px;
    touch-action: manipulation;
  }
  .app:not(.painting-immersive-shell) :is(.icon-btn, .send-button, .user-chip, .mobile-history-btn, .market-fav) {
    min-width: 44px;
    width: 44px;
    min-height: 44px;
    height: 44px;
  }
  .app:not(.painting-immersive-shell) :is(.result-toolbar, .assistant-actions) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* Tablet shell and drawers. */
@media (max-width: 1240px) {
  .app:not(.painting-immersive-shell),
  .app:not(.painting-immersive-shell).history-collapsed,
  .app:not(.painting-immersive-shell).market-focus,
  .app:not(.painting-immersive-shell).market-focus.history-collapsed {
    grid-template-columns: var(--rail) minmax(0, 1fr) !important;
  }
  .app:not(.painting-immersive-shell) > .shell {
    grid-column: 2 !important;
  }
  .app:not(.painting-immersive-shell) > .history-pane {
    position: fixed !important;
    left: calc(var(--rail) + 24px + var(--aiwb-safe-left));
    right: auto;
    top: calc(var(--aiwb-visual-viewport-offset-top) + max(10px, var(--aiwb-safe-top)));
    bottom: calc(var(--aiwb-visual-viewport-bottom-gap) + max(10px, var(--aiwb-safe-bottom)));
    width: min(320px, calc(100vw - var(--rail) - 42px - var(--aiwb-safe-left) - var(--aiwb-safe-right)));
    /* 抽屉一旦脱离网格变成浮层，就不能再用桌面端 0.93 的玻璃底：
       7% 的透光会把下面的工作区（尤其高对比内容）直接透出来。 */
    background: var(--surface, #fff) !important;
    z-index: 520;
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none !important;
    transform: translateX(calc(-100% - 28px)) !important;
  }
  .app:not(.painting-immersive-shell).history-open > .history-pane {
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }
  .drawer-backdrop {
    z-index: 500;
  }

  /* smart-scroll's late position rule must not cancel the task drawer. */
  .mode-page[data-page='vision'] .thread-column.smart-scroll-host,
  .mode-page[data-page='vision'] .thread-column {
    position: fixed !important;
    left: auto !important;
    right: max(10px, var(--aiwb-safe-right)) !important;
    top: calc(var(--aiwb-visual-viewport-offset-top) + max(78px, calc(var(--aiwb-safe-top) + 68px))) !important;
    bottom: calc(var(--aiwb-visual-viewport-bottom-gap) + max(10px, var(--aiwb-safe-bottom))) !important;
    width: min(390px, calc(100vw - var(--rail) - 38px - var(--aiwb-safe-left) - var(--aiwb-safe-right))) !important;
    height: auto !important;
    z-index: 515;
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none !important;
    transform: translateX(calc(100% + 30px)) !important;
  }
  .mode-page[data-page='vision'] .thread-column.smart-scroll-host.drawer-open,
  .mode-page[data-page='vision'] .thread-column.drawer-open {
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }
  .mode-page[data-page='vision'] .vision-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .mode-page[data-page='vision'] .generation-grid > :only-child {
    grid-column: 1 / -1;
    width: min(100%, 820px);
    justify-self: start;
  }

  /* Code preview remains available. */
  .mode-page[data-page='code'] {
    overflow-y: auto;
  }
  .mode-page[data-page='code'] .code-workspace {
    grid-template-columns: minmax(250px, 0.36fr) minmax(0, 1fr);
    overflow: auto;
  }
  .mode-page[data-page='code'] .ide-panel {
    grid-template-columns: 132px minmax(0, 1fr);
    grid-template-rows: minmax(420px, 1fr) minmax(300px, 0.72fr);
    overflow: auto;
  }
  .mode-page[data-page='code'] .preview-pane {
    display: grid !important;
    grid-column: 1 / -1;
    min-height: 300px;
  }

  /* Classic and online layered workspaces use local scrolling. */
  [data-vision-tab='split'].active {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  [data-vision-tab='split'] .ld-modebar,
  [data-vision-tab='split'] .ld-editor-top {
    position: sticky;
    top: 0;
    z-index: 24;
  }
  [data-vision-tab='split'] .ld-classic-grid {
    height: auto;
    grid-template-columns: minmax(230px, 0.78fr) minmax(310px, 1.22fr);
    align-content: start;
  }
  [data-vision-tab='split'] :is(.ld-source, .ld-plan, .ld-preview, .ld-log) {
    min-height: 360px;
  }
  [data-vision-tab='split'] .ld-preview {
    display: block !important;
  }
  [data-vision-tab='split'] :is(.ld-classic-composer, .ld-ai-composer) {
    position: sticky;
    bottom: 0;
    z-index: 22;
  }
  [data-vision-tab='split'] .ld-editor {
    grid-template-columns: minmax(210px, 0.32fr) minmax(360px, 0.68fr);
    height: auto;
    min-height: 720px;
    overflow: visible;
  }
  [data-vision-tab='split'] .ld-inspector {
    grid-column: 1 / -1;
    max-height: none;
    min-height: 300px;
  }

  .video-studio-v2 .video-production-shell.active,
  .video-studio-v2 .video-production-shell.active.agent-collapsed {
    grid-template-columns: minmax(118px, 164px) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    min-height: 0;
  }
  .video-studio-v2 .video-agent-panel {
    right: max(12px, var(--aiwb-safe-right));
    bottom: calc(var(--aiwb-visual-viewport-bottom-gap) + max(12px, var(--aiwb-safe-bottom)));
    max-height: calc(
      var(--aiwb-visual-viewport-height, 100dvh) - 100px - var(--aiwb-safe-top) - var(--aiwb-safe-bottom)
    );
  }
}

@media (max-width: 900px) {
  .app:not(.painting-immersive-shell) .page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .app:not(.painting-immersive-shell) .page-actions {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .app:not(.painting-immersive-shell)
    :is(.page-actions, .tab-switch, .video-v2-primary-nav, .market-scope-tabs, .market-filters)::-webkit-scrollbar {
    display: none;
  }
  .app:not(.painting-immersive-shell)
    :is(.page-actions, .tab-switch, .video-v2-primary-nav, .market-scope-tabs, .market-filters)
    > * {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }
  .app:not(.painting-immersive-shell) :is(.tab-switch, .video-v2-primary-nav, .market-scope-tabs, .market-filters) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .mode-page[data-page='code'] .code-workspace {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }
  .mode-page[data-page='code'] .code-agent-panel {
    min-height: 320px;
  }
  .mode-page[data-page='code'] .ide-panel {
    min-height: 760px;
  }

  /* Five video stages become a labelled horizontal rail. */
  .video-studio-v2 .video-production-shell.active,
  .video-studio-v2 .video-production-shell.active.agent-collapsed {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  .video-studio-v2 .video-v2-stage-rail {
    min-width: 0;
    width: 100%;
    flex-direction: row;
    gap: 6px;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
  }
  .video-studio-v2 .video-v2-stage-rail button {
    flex: 0 0 142px;
    grid-template-columns: 30px minmax(0, 1fr);
    justify-items: stretch;
    min-height: 56px;
    text-align: left;
    scroll-snap-align: center;
  }
  .video-studio-v2 .video-v2-stage-rail button span {
    display: grid;
  }
  .video-studio-v2 .video-v2-stage-rail button small {
    display: none;
  }
  .video-studio-v2 .video-v2-workspace-main {
    width: 100%;
    grid-template-rows: auto auto;
    align-content: start;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .video-studio-v2 :is(.video-director-production-grid, .video-planning-grid, .video-post-grid, .video-finish-export) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Phones in either orientation use safe-area-aware bottom navigation. */
@media (max-width: 760px), (max-width: 960px) and (max-height: 520px) {
  :root {
    --topbar: 56px;
  }
  .app:not(.painting-immersive-shell),
  .app:not(.painting-immersive-shell).history-collapsed,
  .app:not(.painting-immersive-shell).market-focus,
  .app:not(.painting-immersive-shell).market-focus.history-collapsed {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0;
    padding: max(6px, var(--aiwb-safe-top)) max(6px, var(--aiwb-safe-right))
      calc(var(--aiwb-mobile-nav-height) + max(8px, var(--aiwb-safe-bottom))) max(6px, var(--aiwb-safe-left));
  }
  .app:not(.painting-immersive-shell) > .shell {
    grid-column: 1 !important;
    grid-row: 1;
    grid-template-rows: var(--topbar) minmax(0, 1fr);
    gap: 6px;
  }
  .app:not(.painting-immersive-shell) > .rail {
    position: fixed;
    z-index: 540;
    left: max(6px, var(--aiwb-safe-left));
    right: max(6px, var(--aiwb-safe-right));
    bottom: calc(var(--aiwb-visual-viewport-bottom-gap) + max(4px, var(--aiwb-safe-bottom)));
    width: auto;
    height: var(--aiwb-mobile-nav-height);
    min-height: var(--aiwb-mobile-nav-height);
    padding: 5px;
    border-radius: 18px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    box-shadow: 0 16px 44px rgba(24, 32, 48, 0.2);
  }
  .app:not(.painting-immersive-shell) > .rail :is(.logo-button, .rail-spacer) {
    display: none;
  }
  .app:not(.painting-immersive-shell) > .rail .rail-nav {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    flex-direction: row;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .app:not(.painting-immersive-shell) > .rail .rail-nav::-webkit-scrollbar {
    display: none;
  }
  .app:not(.painting-immersive-shell) > .rail .rail-item {
    flex: 1 0 44px;
    width: auto;
    min-width: 44px;
    height: 48px;
    min-height: 48px;
    border-radius: 13px;
    scroll-snap-align: center;
  }
  .app:not(.painting-immersive-shell) > .rail .rail-item span {
    display: none;
  }
  .app:not(.painting-immersive-shell) > .rail :is(.rail-control, .avatar) {
    flex: 0 0 44px;
    width: 44px;
    height: 48px;
    min-height: 48px;
    margin: 0;
  }

  .app:not(.painting-immersive-shell) > .history-pane {
    left: max(6px, var(--aiwb-safe-left));
    right: max(6px, var(--aiwb-safe-right));
    top: calc(var(--aiwb-visual-viewport-offset-top) + max(6px, var(--aiwb-safe-top)));
    bottom: calc(
      var(--aiwb-visual-viewport-bottom-gap) + var(--aiwb-mobile-nav-height) + max(10px, var(--aiwb-safe-bottom))
    );
    width: auto;
    max-width: none;
    transform: translateY(calc(100% + var(--aiwb-mobile-nav-height))) !important;
  }
  .app:not(.painting-immersive-shell).history-open > .history-pane {
    transform: translateY(0) !important;
  }

  /* 历史列表在短视口/横屏会被压成 0 高度：
     .history-pane 是 6 行 grid，列表行是 minmax(0,1fr)，面板本身 overflow:hidden；
     上方 .history-top + .new-task + .history-search + .history-section-head 四个 auto 行
     加上底部 .credits（触屏下按钮被 44px 命中区撑高）合计约 411px，面板高度只有
     「视口 - 80px」，视口低于约 491px 时列表行被算成 0px，任务整体被裁掉。
     这里给列表行一个下限，并允许面板自身滚动，任何新增固定行都不会再把列表挤没。 */
  .app:not(.painting-immersive-shell) > .history-pane {
    grid-template-rows: auto auto auto auto minmax(120px, 1fr) auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* 抽屉原本没有背景色（桌面端靠底层页面透出），移动端变成浮层后
       会直接透出下面的工作区，看起来像"页面错乱"。这里必须给不透明底色。 */
    background: var(--surface);
    box-shadow: 0 18px 44px rgba(24, 32, 48, 0.18);
  }
  .app:not(.painting-immersive-shell) > .history-pane > .history-items {
    min-height: 120px;
  }
  /* 触屏 44px 命中区本意是扩大点击范围，但这些是行内小按钮，
     被拉伸后会撑满整行，白白吃掉列表空间。这里收回。 */
  .app:not(.painting-immersive-shell) > .history-pane
    :is(.workspace-menu-trigger, .history-section-head button, .credits-foot button) {
    min-height: 0;
    height: auto;
  }

  .app:not(.painting-immersive-shell) .topbar {
    min-height: var(--topbar);
    padding: 0 8px;
    gap: 5px;
  }
  .app:not(.painting-immersive-shell) .topbar-left {
    flex: 1 1 auto;
    gap: 6px;
    overflow: hidden;
  }
  .app:not(.painting-immersive-shell) .topbar-right {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 4px;
  }
  .app:not(.painting-immersive-shell) .top-action {
    display: grid !important;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
  }
  .app:not(.painting-immersive-shell) :is(.top-action span, .credit-pill span:last-child, .project-name span) {
    display: none;
  }
  .app:not(.painting-immersive-shell) .project-name strong {
    max-width: clamp(56px, 20vw, 96px);
  }
  .app:not(.painting-immersive-shell) .credit-pill {
    min-width: 44px;
    height: 44px;
    padding: 0 7px;
  }
  .app:not(.painting-immersive-shell) :is(.mobile-history-btn, .user-chip) {
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .app:not(.painting-immersive-shell) .stage {
    border-radius: 17px;
  }
  .app:not(.painting-immersive-shell) .mode-page {
    padding: 9px;
    gap: 8px;
  }
  .app:not(.painting-immersive-shell) .page-head {
    gap: 7px;
  }
  .app:not(.painting-immersive-shell) .page-head h1 {
    font-size: clamp(20px, 6vw, 24px);
    line-height: 1.08;
  }
  .app:not(.painting-immersive-shell) .page-title-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .app:not(.painting-immersive-shell) .page-title-row::-webkit-scrollbar {
    display: none;
  }
  .app:not(.painting-immersive-shell) :is(.page-actions, .tab-switch) button,
  .app:not(.painting-immersive-shell) :is(.dock-chip, .select-trigger, .credit-cost-chip) {
    min-height: 44px;
  }

  /* 移动端顶部精简（客户要求）：隐藏「生图/分层设计」切换 tab，
     以及「历史图库/任务历史」两个操作按钮。
     注意：对话页头里的「整段发送到视觉」也在 .page-actions 里，需要排除，
     否则对话页唯一的操作入口会被误杀。 */
  .app:not(.painting-immersive-shell) .page-head .tab-switch,
  .app:not(.painting-immersive-shell) .page-head .page-actions:not(.chat-transfer-actions) {
    display: none !important;
  }

  /* Horizontal composer rail keeps model, 1K/2K/4K, mode, count and references reachable. */
  .app:not(.painting-immersive-shell) .prompt-dock {
    width: 100% !important;
    max-width: 100%;
    margin-inline: 0;
    padding: 8px;
  }
  .app:not(.painting-immersive-shell) .dock-top {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }
  .app:not(.painting-immersive-shell) .dock-top:has(.select-control.open) {
    overflow: visible;
  }
  .app:not(.painting-immersive-shell) .dock-top > * {
    flex: 0 0 auto;
  }
  .app:not(.painting-immersive-shell) .dock-input-row {
    grid-template-columns: minmax(0, 1fr) 44px;
  }
  .app:not(.painting-immersive-shell) .dock-input-row textarea {
    min-height: 54px;
    max-height: min(132px, 24dvh);
    font-size: 16px;
  }
  .app:not(.painting-immersive-shell) :is(input, select, textarea) {
    font-size: max(16px, 1em);
  }
  .app:not(.painting-immersive-shell) .send-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
  .app:not(.painting-immersive-shell) .select-control.open .select-popover {
    position: fixed;
    left: max(10px, var(--aiwb-safe-left));
    right: max(10px, var(--aiwb-safe-right));
    /* dvh 需 iOS Safari 15.4+，老版本会让整条 bottom 失效导致下拉不可见。
       用 vh 降级（现代浏览器仍可用 vh，牺牲动态地址栏精度换取兼容）。 */
    bottom: calc(
      var(--aiwb-visual-viewport-bottom-gap) + var(--aiwb-mobile-nav-height) + max(104px, 18vh) +
        var(--aiwb-safe-bottom)
    );
    width: auto;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    z-index: 760;
  }
  .app:not(.painting-immersive-shell) .select-option {
    min-height: 48px;
  }

  .mode-page[data-page='vision'] .thread-column.smart-scroll-host,
  .mode-page[data-page='vision'] .thread-column {
    left: max(6px, var(--aiwb-safe-left)) !important;
    right: max(6px, var(--aiwb-safe-right)) !important;
    top: calc(var(--aiwb-visual-viewport-offset-top) + max(6px, var(--aiwb-safe-top))) !important;
    bottom: calc(
      var(--aiwb-visual-viewport-bottom-gap) + var(--aiwb-mobile-nav-height) + max(10px, var(--aiwb-safe-bottom))
    ) !important;
    width: auto !important;
    max-width: none !important;
    transform: translateY(calc(100% + var(--aiwb-mobile-nav-height))) !important;
  }
  .mode-page[data-page='vision'] .thread-column.smart-scroll-host.drawer-open,
  .mode-page[data-page='vision'] .thread-column.drawer-open {
    transform: translateY(0) !important;
  }
  .mode-page[data-page='vision'] .output-grid {
    grid-template-columns: minmax(0, 1fr);
    -webkit-overflow-scrolling: touch;
  }
  .mode-page[data-page='vision'] .result-toolbar {
    opacity: 1;
    transform: none;
    overflow-x: auto;
  }
  .mode-page[data-page='vision'] .result-toolbar button {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
  }

  /* Both layered modes keep source, plan, preview, log, tree, canvas and inspector. */
  [data-vision-tab='split'] :is(.ld-modebar, .ld-editor-top) {
    position: relative;
    height: auto;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 7px;
    padding: 8px;
  }
  [data-vision-tab='split'] :is(.ld-modebar > div, .ld-project-nav, .ld-editor-top > div:last-child) {
    width: 100%;
    min-width: 0;
    display: flex;
    overflow-x: auto;
  }
  [data-vision-tab='split'] .ld-project-nav select,
  [data-vision-tab='split'] .ld-editor-top .ld-project-nav select {
    width: auto;
    min-width: 170px;
    flex: 1 1 190px;
  }
  [data-vision-tab='split'] .ld-modebar > .ghost-action {
    width: 100%;
    justify-content: center;
  }
  [data-vision-tab='split'] :is(.ld-classic-grid, .ld-editor) {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto;
    min-height: 0;
    gap: 8px;
    overflow: visible;
  }
  [data-vision-tab='split'] :is(.ld-source, .ld-plan, .ld-preview, .ld-log, .ld-tree, .ld-inspector) {
    min-height: 300px;
    max-height: none;
  }
  [data-vision-tab='split'] .ld-editor-canvas {
    min-height: 520px;
  }
  [data-vision-tab='split'] .ld-canvas-scroll {
    min-height: 460px;
    padding: 10px;
  }
  [data-vision-tab='split'] :is(.ld-classic-composer, .ld-ai-composer) {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  [data-vision-tab='split'] .ld-chips {
    height: auto;
    min-height: 44px;
    overflow-x: auto;
  }
  [data-vision-tab='split'] .ld-chips > * {
    flex: 0 0 auto;
  }
  [data-vision-tab='split'] .ld-ai-scope {
    display: grid;
  }

  .mode-page[data-page='chat'] .conversation {
    padding: 18px 10px 28px !important;
    scrollbar-gutter: auto;
  }
  .mode-page[data-page='chat'] .chat-message.user {
    max-width: 88% !important;
    margin-right: 0 !important;
  }
.mode-page[data-page='chat'] .prompt-dock.llm-composer textarea {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 112px !important;
  }
  .mode-page[data-page='chat'] .llm-composer-tools {
    min-height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .mode-page[data-page='chat'] .llm-composer-tip {
    display: block;
    white-space: nowrap;
  }

  .mode-page[data-page='code'] :is(.code-workspace, .ide-panel) {
    min-height: 0;
    height: auto;
    overflow: visible;
  }
  .mode-page[data-page='code'] .ide-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(420px, auto) minmax(320px, auto);
  }
  .mode-page[data-page='code'] :is(.file-tree, .editor-area, .preview-pane) {
    grid-column: 1;
    min-width: 0;
  }
  .mode-page[data-page='code'] .file-tree {
    max-height: 190px;
    overflow-y: auto;
  }
  .mode-page[data-page='code'] .preview-pane {
    display: grid !important;
    min-height: 320px;
  }

  .mode-page[data-page='market'] .market-shell {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }
  .mode-page[data-page='market'] .market-grid {
    -webkit-overflow-scrolling: touch;
  }
  .mode-page[data-page='market'] .market-banner {
    min-height: 124px;
    padding: 16px 18px;
  }
  .mode-page[data-page='market'] .market-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }
  .mode-page[data-page='market'] .market-toolbar label {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 44px;
  }
  .mode-page[data-page='market'] .market-filters {
    width: 100%;
    justify-content: flex-start;
  }
  .mode-page[data-page='market'] :is(.market-grid, .market-detail) {
    grid-template-columns: minmax(0, 1fr);
  }

  .mode-page[data-page='animation'] {
    overflow: hidden;
  }
  .mode-page[data-page='animation'] .video-v2-primary-nav {
    order: 0;
    width: 100%;
  }
  .mode-page[data-page='animation'] .video-v2-page.active {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .video-studio-v2 .video-production-shell.active,
  .video-studio-v2 .video-production-shell.active.agent-collapsed {
    height: 100%;
    min-height: 0;
  }
  .video-studio-v2 .video-v2-stage-rail button {
    flex-basis: 132px;
  }
  .video-studio-v2 :is(.video-v2-custom-stage, .drama-production-body) {
    padding-inline: 9px;
  }
  .video-studio-v2
    :is(
      .video-workflow-actions,
      .video-auto-edit-controls,
      .video-auto-edit-pipeline,
      .video-auto-edit-summary,
      .video-director-production-grid,
      .video-planning-grid,
      .video-post-grid,
      .video-finish-export
    ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .video-studio-v2 :is(.video-workflow-actions, .video-finish-export) > * {
    grid-column: auto !important;
    width: 100%;
  }
  .video-studio-v2 .video-agent-panel {
    right: max(7px, var(--aiwb-safe-right));
    bottom: calc(
      var(--aiwb-visual-viewport-bottom-gap) + var(--aiwb-mobile-nav-height) + max(8px, var(--aiwb-safe-bottom))
    );
    width: min(340px, calc(100vw - 14px - var(--aiwb-safe-left) - var(--aiwb-safe-right)));
    height: min(
      560px,
      calc(
        var(--aiwb-visual-viewport-height, 100dvh) - var(--aiwb-mobile-nav-height) - 24px - var(--aiwb-safe-top) -
          var(--aiwb-safe-bottom)
      )
    );
  }
  .video-studio-v2 .video-agent-panel.collapsed {
    width: 52px;
    height: 52px;
  }
  .video-v2-wizard {
    inset: var(--aiwb-visual-viewport-offset-top) var(--aiwb-visual-viewport-right-gap)
      var(--aiwb-visual-viewport-bottom-gap) var(--aiwb-visual-viewport-offset-left);
    padding: max(8px, var(--aiwb-safe-top)) max(8px, var(--aiwb-safe-right))
      calc(var(--aiwb-mobile-nav-height) + max(8px, var(--aiwb-safe-bottom))) max(8px, var(--aiwb-safe-left));
  }
  .video-v2-wizard-dialog {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
  }
  .video-v2-wizard-dialog :is(.video-type-grid, .video-wizard-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-height: 560px) and (max-width: 960px) {
  .app:not(.painting-immersive-shell) .page-head {
    gap: 4px;
  }
  .app:not(.painting-immersive-shell) .micro-label,
  .mode-page[data-page='animation'] .video-v2-title > p {
    display: none;
  }
  .app:not(.painting-immersive-shell) .mode-page {
    padding-block: 6px;
  }
  .video-studio-v2 .video-v2-stage-rail button {
    min-height: 48px;
  }
  /* 极短视口（横屏手机）优先保证历史列表可见，积分块让位 */
  .app:not(.painting-immersive-shell) > .history-pane > .credits {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app:not(.painting-immersive-shell) *,
  .app:not(.painting-immersive-shell) *::before,
  .app:not(.painting-immersive-shell) *::after {
    scroll-behavior: auto !important;
  }
}

/* Final mobile geometry for the two-tier vision composer. */
@media (max-width: 720px) {
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] {
    min-height: 210px !important;
    padding: 8px !important;
    grid-template-rows: minmax(0, 1fr) 54px !important;
    gap: 7px !important;
  }
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] .vision-composer-body {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 8px !important;
    min-height: 0 !important;
    padding: 6px !important;
  }
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] .vision-reference-slot {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
  }
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] .dock-input-row {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    padding: 18px 12px 10px !important;
  }
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] .dock-input-row textarea {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    resize: none !important;
    font-size: 16px !important;
  }
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] .dock-top {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 50px !important;
    padding: 0 2px !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] .send-button {
    flex: 0 0 136px !important;
    width: 136px !important;
    min-width: 136px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] .dock-top > .select-control > .select-trigger,
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] .dock-top > .dock-chip,
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] .dock-top > .credit-cost-chip {
    height: 44px !important;
    min-height: 44px !important;
  }
  .app:not(.painting-immersive-shell) .prompt-dock[data-composer='vision'] .dock-top > .mode-switch {
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* -------------------------------------------------------------------------
   Mobile workbench release pass
   The phone shell is intentionally a single reading column.  Core actions
   stay in a labelled bottom navigation, while each workspace owns its own
   scroll region.  These rules are scoped to the mobile breakpoint so the
   approved desktop composer and layered geometry are untouched.
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root {
    --aiwb-mobile-nav-height: 68px;
  }

  html,
  body {
    overflow: hidden;
    background: #f6f7fa;
  }

  .app:not(.painting-immersive-shell) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    padding: max(5px, var(--aiwb-safe-top)) max(5px, var(--aiwb-safe-right))
      calc(var(--aiwb-mobile-nav-height) + max(8px, var(--aiwb-safe-bottom))) max(5px, var(--aiwb-safe-left));
    gap: 0 !important;
  }

  .app:not(.painting-immersive-shell) > .shell {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
    min-height: 0;
    grid-template-rows: 52px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  /* Compact top bar: project context remains readable, secondary actions move
     to drawers or the mode page itself. */
  .app:not(.painting-immersive-shell) .topbar {
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 8px !important;
    border-radius: 15px !important;
    gap: 6px !important;
  }
  .app:not(.painting-immersive-shell) .topbar-left {
    min-width: 0;
    flex: 1 1 auto;
    gap: 7px;
  }
  .app:not(.painting-immersive-shell) .mobile-history-btn {
    display: grid !important;
    flex: 0 0 38px;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 11px;
  }
  .app:not(.painting-immersive-shell) .project-name strong {
    max-width: min(48vw, 210px);
    font-size: 13px;
  }
  .app:not(.painting-immersive-shell) .project-name span {
    margin-top: 1px;
    font-size: 10px;
  }
  .app:not(.painting-immersive-shell) .topbar-right {
    flex: 0 0 auto;
    gap: 4px;
  }
  .app:not(.painting-immersive-shell) .topbar-right .top-action {
    display: none !important;
  }
  .app:not(.painting-immersive-shell) .credit-pill {
    width: auto !important;
    min-width: 46px !important;
    height: 38px !important;
    padding: 0 8px !important;
    border-radius: 11px;
  }
  .app:not(.painting-immersive-shell) .credit-pill span:last-child {
    display: none !important;
  }
  .app:not(.painting-immersive-shell) .user-chip {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 11px;
  }

  /* Four primary destinations fit the phone width and remain labelled. Less
     frequent desktop destinations stay available through their existing page
     routes without making the mobile rail an unreadable horizontal strip. */
  .app:not(.painting-immersive-shell) > .rail {
    position: fixed !important;
    z-index: 540 !important;
    left: max(5px, var(--aiwb-safe-left)) !important;
    right: max(5px, var(--aiwb-safe-right)) !important;
    bottom: calc(var(--aiwb-visual-viewport-bottom-gap) + max(4px, var(--aiwb-safe-bottom))) !important;
    width: auto !important;
    height: var(--aiwb-mobile-nav-height) !important;
    min-height: var(--aiwb-mobile-nav-height) !important;
    padding: 5px 6px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 36px rgba(24, 32, 48, 0.18) !important;
  }
  .app:not(.painting-immersive-shell) > .rail :is(.logo-button, .rail-spacer) {
    display: none !important;
  }
  .app:not(.painting-immersive-shell) > .rail .rail-nav {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    flex-direction: row !important;
    gap: 3px !important;
    overflow: hidden !important;
  }
  .app:not(.painting-immersive-shell) > .rail .rail-item {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 5px 3px !important;
    border-radius: 13px !important;
    gap: 3px !important;
  }
  .app:not(.painting-immersive-shell) > .rail .rail-item span {
    display: block !important;
    max-width: 100%;
    color: currentColor;
    font-size: 10px !important;
    line-height: 1.1;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app:not(.painting-immersive-shell) > .rail .rail-item svg {
    width: 20px !important;
    height: 20px !important;
  }
  /* 移动端底部导航只保留「视觉」「对话」两个入口（客户要求），
     其余模块（绘画 / 图像处理 / 代码 / 素材广场）隐藏。
     按 data-mode 精确匹配：这几个按钮的顺序会随产品调整，用 nth-child
     隐藏"第 5 个以后"既留错了模块，也会在顺序变动后彻底失效。 */
  .app:not(.painting-immersive-shell) > .rail .rail-item:not([data-mode='vision']):not([data-mode='chat']) {
    display: none !important;
  }
  /* 移动端历史入口只保留顶栏左上角那一个（#mobileHistoryBtn）。
     底部导航原本也放了一个 .rail-control，两个按钮控制同一个抽屉，
     用户会看到"左上角 + 右下角各一个"，误以为是两个不同功能。 */
  .app:not(.painting-immersive-shell) > .rail .rail-control {
    display: none !important;
  }
  .app:not(.painting-immersive-shell) > .rail .avatar {
    display: grid !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    border-radius: 13px !important;
  }

  .app:not(.painting-immersive-shell) .stage {
    min-height: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .app:not(.painting-immersive-shell) .mode-page {
    min-height: 0 !important;
    padding: 10px 8px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }
  .app:not(.painting-immersive-shell) .mode-page.active {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  .app:not(.painting-immersive-shell) .page-head {
    min-width: 0;
    gap: 6px !important;
  }
  .app:not(.painting-immersive-shell) .page-head h1 {
    font-size: 21px !important;
    line-height: 1.12 !important;
  }
  .app:not(.painting-immersive-shell) .page-actions {
    max-width: 100%;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .app:not(.painting-immersive-shell) .page-actions::-webkit-scrollbar {
    display: none;
  }
  .app:not(.painting-immersive-shell) .page-actions > * {
    flex: 0 0 auto;
  }

  /* Generation: result area scrolls, composer stays a compact GPT-like card. */
  .mode-page[data-page='vision'] {
    overflow: hidden !important;
  }
  .mode-page[data-page='vision'] .page-head {
    flex-wrap: nowrap;
  }
  .mode-page[data-page='vision'] .page-head .page-actions {
    width: auto;
    margin-left: auto;
  }
  .mode-page[data-page='vision'] .page-actions .ghost-action {
    min-width: 42px;
    padding-inline: 9px;
  }
  .mode-page[data-page='vision'] .page-actions .ghost-action > :is(span, svg + *) {
    white-space: nowrap;
  }
  .mode-page[data-page='vision'] .vision-tab[data-vision-tab='image'].active {
    display: grid !important;
    grid-template-rows: minmax(140px, 1fr) auto !important;
    min-height: 0;
    gap: 8px;
    overflow: hidden;
  }
  .mode-page[data-page='vision'] .vision-tab[data-vision-tab='image'] .vision-workspace {
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mode-page[data-page='vision'] .vision-tab[data-vision-tab='image'] .output-column {
    min-height: 100%;
  }
  .mode-page[data-page='vision'] .vision-tab[data-vision-tab='image'] .thread-column {
    display: none;
  }
  .prompt-dock[data-composer='vision'] {
    width: 100% !important;
    min-height: 194px !important;
    margin: 0 !important;
    padding: 7px !important;
    border-radius: 18px !important;
    gap: 6px !important;
    grid-template-rows: minmax(0, 1fr) 48px !important;
  }
  .prompt-dock[data-composer='vision'] .vision-composer-body {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    grid-template-rows: minmax(112px, 1fr) !important;
    gap: 7px !important;
    min-height: 0 !important;
    padding: 5px !important;
  }
  .prompt-dock[data-composer='vision'] .vision-reference-slot {
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .prompt-dock[data-composer='vision'] .dock-input-row {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px 6px 6px !important;
  }
  .prompt-dock[data-composer='vision'] .dock-input-row textarea {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 4px 2px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .prompt-dock[data-composer='vision'] .dock-top {
    min-width: 0 !important;
    min-height: 48px !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
  }
  .prompt-dock[data-composer='vision'] .dock-top::-webkit-scrollbar {
    display: none;
  }
  .prompt-dock[data-composer='vision'] .dock-top > * {
    flex: 0 0 auto !important;
  }
  .prompt-dock[data-composer='vision'] .dock-chip,
  .prompt-dock[data-composer='vision'] .select-trigger,
  .prompt-dock[data-composer='vision'] .credit-cost-chip,
  .prompt-dock[data-composer='vision'] .mode-switch {
    height: 44px !important;
    min-height: 44px !important;
  }
  .prompt-dock[data-composer='vision'] .send-button {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }

  /* Layered design: retain every panel, but stack panels into a deliberate
     reading order and keep the editor canvas/inspector reachable by scroll. */
  [data-vision-tab='split'].active {
    display: block !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  [data-vision-tab='split'] :is(.ld-modebar, .ld-editor-top) {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 0 7px !important;
    padding: 6px 7px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(14px);
  }
  [data-vision-tab='split'] .ld-modebar > div:first-child,
  [data-vision-tab='split'] .ld-editor-top > div:first-child {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  [data-vision-tab='split'] .ld-modebar > div:first-child::-webkit-scrollbar,
  [data-vision-tab='split'] .ld-editor-top > div:first-child::-webkit-scrollbar {
    display: none;
  }
  [data-vision-tab='split'] .ld-modebar button,
  [data-vision-tab='split'] .ld-editor-top button,
  [data-vision-tab='split'] .ld-modebar select,
  [data-vision-tab='split'] .ld-editor-top select {
    min-height: 42px !important;
    white-space: nowrap;
  }
  [data-vision-tab='split'] :is(.ld-classic-grid, .ld-editor) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  [data-vision-tab='split'] :is(.ld-source, .ld-plan, .ld-preview, .ld-log, .ld-tree, .ld-editor-canvas, .ld-inspector) {
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: hidden;
    border-radius: 15px !important;
  }
  [data-vision-tab='split'] .ld-source {
    min-height: 238px !important;
  }
  [data-vision-tab='split'] .ld-plan {
    min-height: 268px !important;
  }
  [data-vision-tab='split'] .ld-preview,
  [data-vision-tab='split'] .ld-editor-canvas {
    min-height: 330px !important;
  }
  [data-vision-tab='split'] .ld-log,
  [data-vision-tab='split'] .ld-inspector {
    min-height: 240px !important;
  }
  [data-vision-tab='split'] .ld-canvas-scroll {
    min-height: 270px !important;
    padding: 10px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  [data-vision-tab='split'] .ld-classic-composer,
  [data-vision-tab='split'] .ld-ai-composer {
    position: sticky !important;
    bottom: calc(var(--aiwb-mobile-nav-height) + 7px) !important;
    z-index: 55 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 8px !important;
    padding: 8px !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(12px);
  }
  [data-vision-tab='split'] :is(.ld-chips, .ld-ai-scope) {
    min-width: 0 !important;
    max-width: 100%;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  [data-vision-tab='split'] :is(.ld-chips, .ld-ai-scope)::-webkit-scrollbar {
    display: none;
  }
  [data-vision-tab='split'] .ld-chips > * {
    flex: 0 0 auto !important;
    min-height: 42px !important;
  }
  [data-vision-tab='split'] .ld-ai-composer .dock-input-row,
  [data-vision-tab='split'] .ld-classic-composer .dock-input-row {
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
  }
  [data-vision-tab='split'] :is(.ld-ai-composer, .ld-classic-composer) textarea {
    min-height: 50px !important;
    max-height: 112px !important;
    font-size: 15px !important;
  }

  /* Chat keeps the composer above the safe-area nav and gives messages the
     same readable rhythm as the mobile GPT conversation layout. */
  .mode-page[data-page='chat'] {
    overflow: hidden !important;
  }
  .mode-page[data-page='chat'] .chat-mode-host,
  .mode-page[data-page='chat'] .chat-mode-panel,
  .mode-page[data-page='chat'] .llm-chat-shell {
    min-height: 0 !important;
    height: 100% !important;
  }
  .mode-page[data-page='chat'] .llm-conversation-viewport .conversation {
    padding: 18px 8px 28px !important;
    gap: 18px !important;
  }
  .mode-page[data-page='chat'] .chat-message {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.72 !important;
  }
  .mode-page[data-page='chat'] .chat-message.user {
    max-width: 88% !important;
  }
  .prompt-dock.llm-composer {
    width: 100% !important;
    max-width: none !important;
    padding: 8px 9px 7px !important;
    border-radius: 17px !important;
  }
  .prompt-dock.llm-composer textarea,
  .prompt-dock[data-composer='chat'] textarea {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 112px !important;
    font-size: 16px !important;
  }
  .llm-composer-tools {
    min-height: 42px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
  }
  .llm-composer-tools::-webkit-scrollbar {
    display: none;
  }
  .llm-composer-tools > * {
    flex: 0 0 auto !important;
  }

  /* Painting receives a canvas-first mobile layout. Tool panels remain
     available as the existing left/right drawers rather than shrinking the
     artwork into a letterbox. */
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] {
    overflow: hidden !important;
  }
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] .painting-page-head {
    min-height: 48px !important;
    padding: 3px 2px !important;
  }
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] .painting-title-copy p,
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] .painting-page-head .painting-sync-state {
    display: none !important;
  }
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] .painting-title-line h1 {
    font-size: 21px !important;
  }
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] .painting-page-head .page-actions {
    max-width: 52vw;
  }
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] .painting-page-head .page-actions > :is([data-painting-action='navigation'], [data-painting-action='save'], [data-painting-action='export']) {
    min-width: 42px !important;
    padding-inline: 9px !important;
  }
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] .painting-app {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] .painting-workbench {
    min-height: 0 !important;
    height: 100% !important;
  }
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] .painting-canvas-panel {
    min-height: 0 !important;
    height: 100% !important;
  }
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] .painting-toolbar {
    min-height: 48px !important;
    padding: 4px 6px !important;
  }
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] .painting-toolbar .painting-tool-group button {
    min-width: 44px !important;
    width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
  }
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] .painting-toolbar .painting-tool-group button span {
    display: none !important;
  }
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] .painting-canvas-stage {
    min-height: 0 !important;
    height: 100% !important;
  }
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] .painting-canvas-status {
    min-height: 30px !important;
    font-size: 10px !important;
  }
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] .painting-ai-float,
  .app:not(.painting-immersive-shell) .mode-page[data-page='painting'] .painting-stage-float {
    max-width: calc(100vw - 16px) !important;
  }
}

/* -------------------------------------------------------------------------
   下拉展开时解除 .dock-top 的 overflow 裁剪（用 JS 同步加的 .dock-top-open 类，
   替代 CSS :has() 依赖 —— :has() 需 iOS Safari 15.4+，老版本失效导致下拉被裁、
   表现为「点击无反应」）。放在文件末尾，保证源码顺序最后、覆盖所有断点规则。
------------------------------------------------------------------------- */
.app:not(.painting-immersive-shell) .dock-top.dock-top-open {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}