/* V666: constructor-only touch layout. Desktop and calculator styles are unchanged. */
.builder-mobile-nav,
.builder-touch-controls {
  display: none;
}

/* Dimension text stays on one stable layer above the animated canvas. */
body.builder-page #viewer-dimensions .viewer-dimensions__label {
  width: max-content !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  transition: none !important;
}

@media (max-width: 980px) {
  html:has(body.builder-page) {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: auto !important;
  }

  html body.builder-page:has(#constructor-workspace) {
    display: block !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    touch-action: auto !important;
  }

  /* Legacy modal closers restore desktop overflow styles; the root owns
     mobile scroll and stays locked only while a dialog is actually open. */
  html:has(body.builder-page .modal:not(.hidden)),
  html:has(body.builder-page.is-ozon-delivery-open),
  html body.builder-page:has(#constructor-workspace).is-ozon-delivery-open,
  html body.builder-page:has(#constructor-workspace):has(.modal:not(.hidden)) {
    overflow-y: hidden !important;
  }

  html body.builder-page #constructor-workspace {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 12px !important;
    padding: 0 12px 20px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body.builder-page #constructor-workspace .builder-mobile-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    order: -2;
    position: sticky;
    top: calc(76px + env(safe-area-inset-top, 0px));
    z-index: 80;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 10px;
    background: #101b2d;
  }

  html body.builder-page #constructor-workspace .builder-mobile-nav button {
    min-height: 46px;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 8px;
    padding: 8px 12px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    background: #20314b;
    color: #f8fafc;
    touch-action: manipulation;
  }

  html body[data-theme="light"].builder-page #constructor-workspace .builder-mobile-nav,
  html[data-theme="light"] body.builder-page #constructor-workspace .builder-mobile-nav {
    background: #f8fafc;
  }

  html body[data-theme="light"].builder-page #constructor-workspace .builder-mobile-nav button,
  html[data-theme="light"] body.builder-page #constructor-workspace .builder-mobile-nav button {
    background: #fff;
    color: #0f172a;
  }

  html body.builder-page #constructor-workspace :is(#builder-preview-section, #builder-settings-section, #dynamic-form) {
    scroll-margin-top: calc(154px + env(safe-area-inset-top, 0px));
  }

  html body.builder-page #constructor-workspace :is(.builder-sidebar, .builder-stage, .builder-card--controls, #dynamic-form) {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    overscroll-behavior: auto !important;
    touch-action: auto !important;
    box-sizing: border-box !important;
  }

  html body.builder-page #constructor-workspace .builder-stage { order: -1 !important; }
  html body.builder-page #constructor-workspace .builder-sidebar { order: 0 !important; gap: 12px !important; }
  html body.builder-page #constructor-workspace .builder-card--controls { display: block !important; }
  html body.builder-page #constructor-workspace #dynamic-form { padding: 8px 0 !important; scrollbar-gutter: auto; }

  html body.builder-page #constructor-workspace .viewer-card--builder {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas: "toolbar" "touch" "mold" "viewer" "side" "price" !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 10px !important;
    padding: 0 0 12px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body.builder-page #constructor-workspace .viewer-toolbar { grid-area: toolbar !important; padding: 10px !important; overflow: visible !important; }
  html body.builder-page #constructor-workspace .viewer-toolbar__right.viewer-toolbar__right--pro {
    display: flex !important;
    flex-flow: row wrap !important;
    max-height: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body.builder-page .mold-toolbar-portal .viewer-toolbar-menu__item,
  html body.builder-page #constructor-workspace :is(.viewer-toolbar__btn, .viewer-toolbar-menu__item, .builder-sidebar .btn, .builder-sidebar .param-chip) {
    min-height: 46px !important;
    height: auto !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    touch-action: manipulation;
  }

  html body.builder-page #constructor-workspace :is(#undo-config-btn, #redo-config-btn) {
    width: 46px !important;
    min-width: 46px !important;
    flex: 0 0 46px !important;
  }

  html body.builder-page #constructor-workspace .builder-touch-controls {
    grid-area: touch;
    display: grid;
    gap: 8px;
    padding: 0 12px;
  }
  html body.builder-page #constructor-workspace #builder-touch-toggle { min-height: 48px; width: 100%; white-space: normal; font-size: 16px; }
  html body.builder-page #constructor-workspace #builder-touch-hint { font-size: 14px; line-height: 1.4; }
  html body.builder-page #constructor-workspace #builder-touch-toggle[aria-pressed="true"] { outline: 2px solid #38bdf8; outline-offset: 2px; }

  html body.builder-page #constructor-workspace #viewer {
    grid-area: viewer !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: clamp(300px, 52svh, 460px) !important;
    min-height: 300px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  html body.builder-page #constructor-workspace #viewer.builder-touch-managed:not(.is-touch-interactive) {
    touch-action: pan-y pinch-zoom !important;
  }
  html body.builder-page #constructor-workspace #viewer.builder-touch-managed:not(.is-touch-interactive) canvas {
    pointer-events: none !important;
  }
  html body.builder-page #constructor-workspace #viewer.builder-touch-managed.is-touch-interactive,
  html body.builder-page #constructor-workspace #viewer.builder-touch-managed.is-touch-interactive canvas {
    touch-action: none !important;
    pointer-events: auto !important;
  }

  html body.builder-page #constructor-workspace :is(#viewer-dimensions, .viewer-dimensions, .viewer-processing) {
    grid-area: viewer !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
  html body.builder-page #constructor-workspace .viewer-help--desktop,
  html body.builder-page #constructor-workspace .viewer-badge { display: none !important; }
  html body.builder-page #constructor-workspace .viewer-side-stack {
    grid-area: side !important;
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas: "patient" "dimensions" "colors" "rotate" !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  html body.builder-page #constructor-workspace :is(.dimension-hud, .viewer-color-and-save, .viewer-color-palette, .viewer-rotation-control, .viewer-order-overlay) {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  html body.builder-page #constructor-workspace .viewer-side-stack .doctor-patient-workspace { grid-area: patient !important; position: static !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; }
  html body.builder-page #constructor-workspace .viewer-side-stack .dimension-hud { grid-area: dimensions !important; contain: none !important; overflow: visible !important; }
  html body.builder-page #constructor-workspace .viewer-side-stack .viewer-color-and-save { grid-area: colors !important; }
  html body.builder-page #constructor-workspace .viewer-side-stack .viewer-rotation-control { grid-area: rotate !important; }
  html body.builder-page #constructor-workspace .dimension-hud__grid { height: auto !important; max-height: none !important; overflow: visible !important; }
  html body.builder-page #constructor-workspace .viewer-order-overlay { grid-area: price !important; padding: 12px !important; }
  html body.builder-page #constructor-workspace :is(.viewer-order-overlay__button, .viewer-save-design-action__button) { width: 100% !important; min-height: 48px !important; font-size: 16px !important; }
  html body.builder-page #constructor-workspace .viewer-color-palette { gap: 8px !important; flex-wrap: wrap !important; }

  html body.builder-page #constructor-workspace .viewer-view-cube {
    --view-cube-arrow: 44px;
    display: grid !important;
    grid-template-columns: repeat(2, 44px);
    grid-template-rows: repeat(2, 44px);
    grid-template-areas: "top right" "left bottom";
    gap: 4px;
    padding: 2px;
    box-sizing: border-box;
    width: 96px !important;
    height: 96px !important;
    top: 10px !important;
    right: 10px !important;
  }
  html body.builder-page #constructor-workspace .viewer-view-cube__scene { display: none !important; }
  html body.builder-page #constructor-workspace .viewer-view-cube__arrow {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 12px;
  }
  html body.builder-page #constructor-workspace .viewer-view-cube__arrow--top { grid-area: top; }
  html body.builder-page #constructor-workspace .viewer-view-cube__arrow--right { grid-area: right; }
  html body.builder-page #constructor-workspace .viewer-view-cube__arrow--left { grid-area: left; }
  html body.builder-page #constructor-workspace .viewer-view-cube__arrow--bottom { grid-area: bottom; }
  html body.builder-page #constructor-workspace .viewer-view-cube__arrow::before { width: 10px; height: 10px; }

  html body.builder-page #constructor-workspace :is(.field__reset-btn, .field__pin-btn, .viewer-color-palette .color-swatch) {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    touch-action: manipulation;
  }
  html body.builder-page #constructor-workspace .field__title-row { gap: 8px; flex-wrap: wrap; }
  html body.builder-page #constructor-workspace .field__title-row label { min-width: 0; flex: 1 1 140px; }
  html body.builder-page #constructor-workspace :is(.field__label, .field__title-row label, .builder-sidebar .toggle, .live-size-control > span) { font-size: 14px !important; line-height: 1.4 !important; }
  html body.builder-page #constructor-workspace .builder-sidebar .toggle { min-height: 48px !important; padding: 8px !important; gap: 12px !important; }
  html body.builder-page #constructor-workspace .builder-sidebar input[type="checkbox"] { width: 24px !important; height: 24px !important; min-width: 24px !important; max-width: 24px !important; min-height: 24px !important; max-height: 24px !important; flex: 0 0 24px !important; }
  html body.builder-page #constructor-workspace .builder-sidebar .toggle span { font-size: 14px !important; }
  html body.builder-page #constructor-workspace .live-size-lock { min-height: 44px; gap: 8px; }
  html body.builder-page #constructor-workspace .field__number-controls { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  html body.builder-page #constructor-workspace .builder-sidebar :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  html body.builder-page #constructor-workspace .field__range {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 44px;
    margin: 0;
    background: transparent;
    touch-action: pan-y;
  }
  html body.builder-page #constructor-workspace .field__range::-webkit-slider-runnable-track { height: 6px; border-radius: 4px; background: #64748b; }
  html body.builder-page #constructor-workspace .field__range::-moz-range-track { height: 6px; border-radius: 4px; background: #64748b; }
  html body.builder-page #constructor-workspace .field__range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    margin-top: -11px;
    border: 2px solid #f8fafc;
    border-radius: 50%;
    background: #0284c7;
  }
  html body.builder-page #constructor-workspace .field__range::-moz-range-thumb { width: 26px; height: 26px; border: 2px solid #f8fafc; border-radius: 50%; background: #0284c7; }
  html body.builder-page #constructor-workspace .customize-actions { position: static !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  html body.builder-page #constructor-workspace .mold-quick-panel {
    grid-area: mold !important;
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box;
  }
  html body.builder-page #constructor-workspace .mold-quick-panel :is(button, summary, .mold-inline-upload, .mold-inline-project-row label, .mold-inline-exports a) {
    min-height: 44px !important;
    height: auto !important;
    font-size: 14px !important;
    box-sizing: border-box;
  }
  html body.builder-page #constructor-workspace .mold-quick-panel :is(input:not([type="checkbox"]):not([type="file"]), select) { min-height: 48px !important; font-size: 16px !important; }
  html body.builder-page #constructor-workspace .mold-quick-panel :is(.mold-quick-field span, .mold-inline-feature strong) { font-size: 14px; line-height: 1.4; }
  html body.builder-page #constructor-workspace :is(.mold-quick-panel__close, .mold-inline-feature__actions button) { min-width: 44px !important; }
  html body.builder-page #constructor-workspace .mold-inline-feature { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  html body.builder-page #constructor-workspace .builder-mobile-nav button:focus-visible,
  html body.builder-page #constructor-workspace .builder-sidebar :is(button, input, select):focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
  }
}

@media (max-width: 520px) {
  html body.builder-page #constructor-workspace .live-size-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
  html body.builder-page #constructor-workspace .model-header-actions { flex-wrap: wrap !important; gap: 8px !important; }
  html body.builder-page #constructor-workspace .mold-quick-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* V667: close state must win over touch browsers' retained hover/focus. */
body.builder-page .viewer-toolbar-menu.is-menu-managed:not(.is-open) > .viewer-toolbar-menu__popover {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.builder-page .viewer-toolbar-menu.is-menu-managed:not(.is-open) .viewer-toolbar-menu__chevron { transform: none !important; }
.viewer-toolbar-menu-backdrop,
.viewer-toolbar-menu-sheet { display: none; }

@media (max-width: 980px) {
  /* Earlier desktop rules cap this multi-row admin navigation at 44/50px. */
  html body.admin-mode.builder-page .admin-toolbar {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  html:has(body.builder-page.toolbar-menu-mobile-open),
  html body.builder-page.toolbar-menu-mobile-open:has(#constructor-workspace) { overflow-y: hidden !important; }
  body.builder-page .mold-toolbar-portal.is-mobile-menu { pointer-events: auto; }
  body.builder-page .is-mobile-menu .viewer-toolbar-menu-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, .48);
    touch-action: none;
  }
  body.builder-page .is-mobile-menu .viewer-toolbar-menu-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: var(--toolbar-sheet-left);
    top: var(--toolbar-sheet-bottom-edge);
    transform: translateY(-100%);
    width: var(--toolbar-sheet-width);
    max-height: var(--toolbar-sheet-max-height);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 10051;
    border: 1px solid #41536a;
    border-radius: 16px;
    background: #101b2d;
    color: #f8fafc;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
  }
  body.builder-page .viewer-toolbar-menu-sheet__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: static;
    min-height: 60px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, .25);
    box-sizing: border-box;
    background: inherit;
  }
  body.builder-page #viewer-toolbar-menu-sheet-title { font-size: 16px; line-height: 1.3; }
  body.builder-page .viewer-toolbar-menu-sheet__close {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, .4);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 28px;
    line-height: 1;
    touch-action: manipulation;
  }
  body.builder-page .viewer-toolbar-menu-sheet__content {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.builder-page .viewer-toolbar-menu-sheet .viewer-toolbar-menu__popover.is-portaled {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
    padding: 8px;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
  }
  html body.builder-page .viewer-toolbar-menu-sheet .viewer-toolbar-menu__item { min-height: 48px !important; }
  body.builder-page .viewer-toolbar-menu-sheet .viewer-toolbar-menu__item strong { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
  body.builder-page .viewer-toolbar-menu-sheet .viewer-toolbar-menu__item small { font-size: 12px; line-height: 1.4; color: #a9bbcf; }
  body.builder-page .viewer-toolbar-menu-sheet .viewer-toolbar-menu__section-title { font-size: 12px; line-height: 1.4; }
  body.builder-page .viewer-toolbar-menu-sheet :is(button, a):focus-visible { outline: 2px solid #38bdf8; outline-offset: -2px; }
  body[data-theme="light"].builder-page .viewer-toolbar-menu-sheet { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
  body[data-theme="light"].builder-page .viewer-toolbar-menu-sheet .viewer-toolbar-menu__item small { color: #475569; }
}