/* Painting touch workspace: phone, iPadOS and HarmonyOS tablet parity. */
.mode-page[data-page='painting'] .painting-drawer-backdrop {
  display: none;
}

@supports (height: 100dvh) {
  .mode-page[data-page='painting'] {
    min-height: min(100%, 100dvh);
    max-height: 100dvh;
  }
}

@media (max-width: 1024px), (pointer: coarse) and (max-width: 1366px) {
  .mode-page[data-page='painting'] {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    height: min(100%, var(--painting-visual-height, 100dvh));
    max-height: var(--painting-visual-height, 100dvh);
    padding-right: env(safe-area-inset-right, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    overflow: hidden;
  }

  .mode-page[data-page='painting'] .painting-page-head {
    min-width: 0;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
    padding-left: max(10px, env(safe-area-inset-left, 0px));
  }

  .mode-page[data-page='painting'] .painting-page-head .page-actions {
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
  }

  .mode-page[data-page='painting'] .painting-page-head .page-actions > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .mode-page[data-page='painting'] .painting-page-head .painting-sync-state,
  .mode-page[data-page='painting'] .painting-page-head [data-painting-action='save'],
  .mode-page[data-page='painting'] .painting-page-head [data-painting-action='versions'] {
    display: inline-flex !important;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] {
    position: relative;
    display: grid;
    min-height: 0;
    height: 100%;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-workbench {
    position: relative;
    display: block !important;
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-row: 1;
    overflow: hidden !important;
    border-radius: 12px;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-canvas-panel {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-toolbar,
  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-selection-bar,
  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-canvas-status {
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-toolbar::-webkit-scrollbar,
  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-selection-bar::-webkit-scrollbar,
  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-canvas-status::-webkit-scrollbar {
    display: none;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-toolbar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 6px max(8px, env(safe-area-inset-left, 0px));
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-toolbar .painting-tool-group {
    display: inline-flex;
    flex: 0 0 auto;
    overflow: visible;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    .painting-toolbar
    .painting-tool-group
    button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    .painting-toolbar
    .painting-adjustment-tools
    button {
    width: auto;
    min-width: 104px;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    .painting-toolbar
    .painting-view-tools
    button {
    width: auto;
    min-width: 48px;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-selection-bar {
    display: flex;
    min-height: 50px;
    flex-wrap: nowrap;
    align-items: center;
    padding: 4px 8px;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-selection-bar[hidden] {
    display: none;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-selection-bar > * {
    flex: 0 0 auto;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-canvas-stage,
  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] #paintingStrokeCanvas {
    min-height: 0;
    overscroll-behavior: none;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    .painting-canvas-stage[data-touch-gesture='pinch-pan'] {
    cursor: grabbing;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-canvas-status {
    display: flex;
    min-height: 32px;
    align-items: center;
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    white-space: nowrap;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-canvas-status span {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    :is(.painting-brush-panel, .painting-side-panel) {
    position: fixed !important;
    z-index: 380;
    top: calc(var(--painting-viewport-offset-top, 0px) + max(8px, env(safe-area-inset-top, 0px)));
    bottom: calc(var(--painting-keyboard-inset, 0px) + max(8px, env(safe-area-inset-bottom, 0px)));
    display: block !important;
    width: min(88vw, 390px) !important;
    height: auto !important;
    max-width: calc(100vw - 52px);
    max-height: none !important;
    overflow: auto;
    border: 1px solid rgba(119, 126, 119, 0.36);
    box-shadow: 0 20px 56px rgba(25, 31, 28, 0.34);
    transition: transform 180ms ease;
    will-change: transform;
    overscroll-behavior: contain;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-brush-panel {
    right: auto !important;
    left: max(0px, env(safe-area-inset-left, 0px)) !important;
    border-radius: 0 14px 14px 0;
    transform: translate3d(-105%, 0, 0) !important;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-side-panel {
    right: max(0px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    border-radius: 14px 0 0 14px;
    transform: translate3d(105%, 0, 0) !important;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true'][data-focus-left-open='true']
    .painting-brush-panel,
  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true'][data-focus-right-open='true']
    .painting-side-panel {
    transform: translate3d(0, 0, 0) !important;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-drawer-backdrop {
    position: fixed;
    z-index: 370;
    inset: 0;
    display: block;
    border: 0;
    background: rgba(24, 30, 27, 0.36);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']:is([data-focus-left-open='true'], [data-focus-right-open='true'])
    .painting-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-focus-edge {
    position: fixed !important;
    z-index: 390 !important;
    top: 50% !important;
    display: flex !important;
    width: 46px !important;
    min-width: 46px !important;
    min-height: 96px !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 5px;
    border-color: rgba(235, 232, 255, 0.82);
    background: linear-gradient(180deg, #665be5, #483dbb);
    color: #fff;
    font-size: 12px;
    font-weight: 760;
    writing-mode: vertical-rl;
    transform: translateY(-50%) !important;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-focus-edge-left {
    right: auto !important;
    left: env(safe-area-inset-left, 0px) !important;
    border-radius: 0 12px 12px 0;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-focus-edge-right {
    right: env(safe-area-inset-right, 0px) !important;
    left: auto !important;
    border-radius: 12px 0 0 12px;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-focus-edge::after {
    content: none !important;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-focus-edge b {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    line-height: 1;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    :is(button, select, textarea, input:not([type='checkbox']):not([type='radio']):not([type='color'])) {
    box-sizing: border-box;
    min-height: 44px;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    :is(label:has(input[type='checkbox']), label:has(input[type='radio'])) {
    min-height: 44px;
    align-items: center;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] input[type='range'] {
    min-height: 44px;
    touch-action: pan-x;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] :is(.painting-layer-row, .painting-brush-list button) {
    min-height: 52px;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    :is(.painting-panel-head, .painting-floating-head, .painting-layer-row, button, label) {
    line-height: 1.25;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    :is(button, .painting-panel-head, .painting-floating-head)
    :is(span, strong, small) {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    :is(.painting-stage-float, .painting-ai-float),
  .mode-page[data-page='painting']
    .painting-app[data-focus-mode='true'][data-compact-layout='true']
    :is(.painting-stage-float, .painting-ai-float) {
    position: fixed !important;
    z-index: 350;
    top: auto !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(var(--painting-keyboard-inset, 0px) + max(8px, env(safe-area-inset-bottom, 0px))) !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: min(68vh, calc(var(--painting-visual-height, 100dvh) - 24px));
    resize: none;
    transform: none !important;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    .painting-stage-float.is-collapsed {
    right: auto !important;
    width: min(46vw, 210px) !important;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-ai-float.is-collapsed {
    left: auto !important;
    width: min(46vw, 210px) !important;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    :is(.painting-stage-float, .painting-ai-float).is-collapsed {
    height: 58px !important;
    max-height: 58px !important;
    overflow: hidden;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    .painting-stage-float.is-collapsed
    .painting-floating-head,
  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    .painting-ai-float.is-collapsed
    .painting-panel-head {
    height: 58px;
    min-height: 58px;
    flex-wrap: nowrap;
    padding: 6px 8px;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    .painting-stage-float.is-collapsed
    .painting-floating-head
    > div {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    :is(.painting-stage-float, .painting-ai-float)
    :is(.painting-floating-head, .painting-panel-head) {
    cursor: default;
    touch-action: manipulation;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-stage-flow {
    display: grid;
    grid-template-columns: repeat(8, minmax(112px, 1fr));
    overflow-x: auto;
    touch-action: pan-x;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-stage-flow[hidden] {
    display: none;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-large-float {
    position: fixed !important;
    z-index: 430;
    top: calc(var(--painting-viewport-offset-top, 0px) + max(8px, env(safe-area-inset-top, 0px))) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(var(--painting-keyboard-inset, 0px) + max(8px, env(safe-area-inset-bottom, 0px))) !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    resize: none;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-reference-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    touch-action: pan-x;
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-reference-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(180px, 72vw), 1fr));
  }

  .painting-floating-modal .painting-adjustment-window {
    top: calc(var(--painting-viewport-offset-top, 0px) + max(8px, env(safe-area-inset-top, 0px))) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(var(--painting-keyboard-inset, 0px) + max(8px, env(safe-area-inset-bottom, 0px))) !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    resize: none !important;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true'][data-touch-tablet-layout='true']
    :is(.painting-stage-float, .painting-ai-float):not(.is-collapsed) {
    top: calc(var(--painting-viewport-offset-top, 0px) + max(72px, env(safe-area-inset-top, 0px))) !important;
    right: auto !important;
    bottom: auto !important;
    left: max(64px, env(safe-area-inset-left, 0px)) !important;
    width: min(560px, calc(100vw - 128px)) !important;
    max-width: calc(100vw - 128px) !important;
    max-height: min(70vh, calc(var(--painting-visual-height, 100dvh) - 96px));
    resize: both;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true'][data-touch-tablet-layout='true']
    :is(.painting-stage-float, .painting-ai-float):not(.is-collapsed)
    :is(.painting-floating-head, .painting-panel-head) {
    cursor: move;
    touch-action: none;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true'][data-touch-tablet-layout='true']
    .painting-large-float {
    top: calc(var(--painting-viewport-offset-top, 0px) + max(48px, env(safe-area-inset-top, 0px))) !important;
    right: auto !important;
    bottom: auto !important;
    left: max(48px, env(safe-area-inset-left, 0px)) !important;
    width: min(88vw, 1180px) !important;
    height: min(84vh, 860px) !important;
    min-width: min(620px, calc(100vw - 96px)) !important;
    min-height: min(430px, calc(var(--painting-visual-height, 100dvh) - 96px)) !important;
    max-width: calc(100vw - 96px) !important;
    max-height: calc(var(--painting-visual-height, 100dvh) - 96px) !important;
    resize: both;
  }
}

@media (orientation: landscape) and (max-height: 700px) and (pointer: coarse) {
  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    :is(.painting-brush-panel, .painting-side-panel) {
    width: min(46vw, 410px) !important;
  }

  .mode-page[data-page='painting']
    .painting-app[data-compact-layout='true']
    :is(.painting-stage-float, .painting-ai-float):not(.is-collapsed) {
    max-height: calc(var(--painting-visual-height, 100dvh) - 20px);
  }

  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-canvas-status {
    min-height: 28px;
    padding-block: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] :is(.painting-brush-panel, .painting-side-panel),
  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true'] .painting-drawer-backdrop {
    transition: none !important;
  }
}