/* PXLTAB host-only adjustments. The copied V3 Editor layout remains unchanged. */
.app-shell {
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}

.topbar {
  display: none !important;
}

@media (max-width: 1500px) {
  .opacity-control,
  .brush-size-control,
  .toolbar-control-divider,
  .canvas-toolbar input[type="range"] {
    display: none;
  }
}

@media (max-width: 1200px) {
  .toolbar-mode {
    display: none;
  }
}

.comment-edit-button.comment-delete-button {
  display: none;
}

.comment-drag-surface {
  position: absolute;
  z-index: 1;
  display: none;
  box-sizing: border-box;
  pointer-events: none;
}

.comment-edit-button {
  z-index: 2;
}

#expandCanvasControls > label > span {
  display: none;
}

.edit-limit-notice {
  position: absolute;
  z-index: 45;
  top: 64px;
  left: 50%;
  width: min(420px, calc(100% - 24px));
  box-sizing: border-box;
  padding: 11px 14px;
  transform: translateX(-50%);
  border: 1px solid rgba(226, 54, 73, 0.72);
  border-radius: 10px;
  color: #8f1423;
  background: #fff5f6;
  box-shadow: 0 12px 30px rgba(17, 24, 32, 0.24);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
  text-align: center;
  pointer-events: none;
}

.edit-limit-notice[hidden] {
  display: none;
}

@media (max-width: 760px) {
  html,
  body {
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .app-shell {
    height: auto;
    min-height: 0;
    grid-template-rows: auto;
  }

  .canvas-viewport.native-page-pan {
    touch-action: pan-x pan-y pinch-zoom;
  }

  /* History comparison is a horizontal gesture. Keep native vertical page
     scrolling and pinch zoom, but reserve horizontal movement for the divider
     so Chromium does not cancel pointer capture after the drag begins. */
  .canvas-viewport.native-page-pan.history-compare-active {
    touch-action: pan-y pinch-zoom;
  }

  .editor-layout {
    min-height: 0;
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-rows: 560px auto;
  }

  .tool-group,
  .tool-button,
  .smart-tool-wrap {
    min-width: 0;
  }

  .toolrail {
    align-items: stretch;
    overflow-x: hidden;
    padding-inline: 4px;
  }

  .tool-button {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    justify-items: center;
    padding-inline: 2px;
  }

  .tool-button svg {
    display: block;
    margin-inline: auto;
  }

  .tool-button span {
    width: 100%;
    max-width: 100%;
    font-size: 8px;
    line-height: 1.15;
    overflow-wrap: normal;
    text-align: center;
    word-break: normal;
  }

  .tool-hint {
    width: min(230px, calc(100% - 20px));
    max-width: calc(100% - 20px);
    padding: 6px 9px;
    font-size: 7px;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
  }

  .inline-comment-editor {
    cursor: default;
    touch-action: none;
  }

  .inline-comment-number {
    width: 26px;
    height: 26px;
    margin-top: 0;
    cursor: default;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.82), 0 4px 12px rgba(17, 24, 32, 0.28);
  }

  .empty-state {
    padding: 18px 14px;
  }

  .empty-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 13px;
    border-radius: 17px;
  }

  .empty-state h1 {
    font-size: 21px;
  }

  .empty-state p {
    max-width: 270px;
    margin-block: 8px 14px;
    font-size: 10px;
    line-height: 1.45;
  }

  .empty-actions {
    gap: 7px;
  }

  .empty-actions .button {
    min-height: 36px;
    padding-inline: 11px;
    font-size: 10px;
  }

  .upload-rules {
    margin-top: 11px;
    font-size: 8px;
  }

  .inspector {
    min-height: 0;
  }

  .inspector-panel {
    overflow: visible;
  }

  /* The embedded Editor grows with the parent page on mobile. Centering a
     dialog against that full iframe height can place its actions below the
     phone viewport, so mobile dialogs start at the visible Editor edge and
     keep their action row reachable while their content scrolls. */
  .modal[open] {
    box-sizing: border-box;
    place-items: start center;
    padding: 8px;
  }

  .modal-card {
    width: 100%;
    max-height: min(540px, calc(100dvh - 16px));
    padding: 16px;
    border-radius: 14px;
  }

  .modal-card .modal-actions {
    position: sticky;
    z-index: 2;
    bottom: -16px;
    margin-inline: -16px;
    padding: 10px 16px 16px;
    background: var(--surface);
  }

  .comment-edit-button {
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
  }

  .comment-drag-surface {
    display: block;
    border: 0;
    background: transparent;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    cursor: grab;
  }

  .comment-edit-button svg {
    width: 14px;
    height: 14px;
  }

  .comment-edit-button.comment-delete-button {
    display: grid;
    border-color: rgba(226, 54, 73, 0.82);
    color: #ffffff;
    background: #8f2330;
  }

  .comment-edit-button.comment-delete-button:is(:hover, :focus-visible) {
    border-color: #ffffff;
    color: #ffffff;
    background: #b52a39;
  }

  #expandCanvasControls {
    top: 8px;
    right: 14px;
    left: 14px;
    width: auto;
    max-width: none;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.72fr) minmax(72px, 0.8fr);
    grid-template-rows: 24px 24px;
    column-gap: 3px;
    row-gap: 5px;
    padding: 5px 4px 4px;
    transform: none;
  }

  #expandCanvasControls[hidden] {
    display: none;
  }

  #baseCropControls {
    top: 8px;
    right: 14px;
    left: 14px;
    width: auto;
    max-width: none;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(58px, 0.7fr) minmax(76px, 0.9fr);
    grid-template-rows: 31px 24px;
    gap: 3px;
    padding: 5px 4px 4px;
    transform: none;
  }

  #baseCropControls[hidden] {
    display: none;
  }

  #baseCropControls > label:first-of-type {
    grid-column: 1 / 3;
    grid-row: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 5px;
  }

  #baseCropControls > label:first-of-type > span {
    font-size: 6px;
  }

  #baseCropPreset {
    width: 100%;
    min-width: 0;
    height: 22px;
  }

  #baseCropCustom {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    gap: 2px;
  }

  #baseCropCustom label {
    min-width: 0;
    gap: 2px;
  }

  #baseCropCustom input {
    width: 31px;
    height: 22px;
    padding-inline: 3px;
    font-size: 7px;
  }

  #baseCropSize {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
  }

  #cancelBaseCrop,
  #confirmBaseCrop {
    grid-row: 2;
    width: 100%;
    height: 24px;
    padding-inline: 5px;
    font-size: 7px;
  }

  #cancelBaseCrop {
    grid-column: 2;
  }

  #confirmBaseCrop {
    grid-column: 3;
  }

  #expandCanvasControls > label {
    min-width: 0;
    display: grid;
    grid-template-rows: 22px;
    gap: 0;
    align-items: center;
  }

  #expandCanvasControls > label > span {
    display: none;
  }

  #expandCanvasControls > label:first-of-type {
    grid-column: 1;
    grid-row: 1;
  }

  #expandCanvasControls > label:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
  }

  #expandCanvasControls label > span {
    padding-inline: 2px;
    font-size: 6px;
    line-height: 7px;
  }

  #expandCanvasControls select {
    width: 100%;
    min-width: 0;
    height: 22px;
  }

  #expandCanvasSize {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 7px;
    text-align: center;
    text-overflow: ellipsis;
  }

  #cancelExpandCanvas {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    box-sizing: border-box;
    height: 24px;
    padding-inline: 6px;
    font-size: 7px;
  }

  /* The shared generation lifecycle wraps the button after load. Position the
     wrapper itself so it cannot auto-flow into the compact toolbar's first row. */
  #expandCanvasControls > .px-generation-action-shell--expand {
    grid-column: 2 / -1;
    grid-row: 2;
    place-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 24px;
    flex-basis: auto;
  }

  #generateExpandCanvas.px-generation-action {
    width: 100% !important;
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: none !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding-inline: 6px !important;
    flex: 0 1 auto !important;
    box-shadow: none !important;
    font-size: 7px;
  }

  /* Keep the pre-enhancement button in the same location before its shared
     lifecycle wrapper is attached. */
  #expandCanvasControls > #generateExpandCanvas.px-generation-action {
    grid-column: 2 / -1;
    grid-row: 2;
    place-self: stretch;
  }

  #expandCanvasControls > .px-generation-action-shell--expand > .px-generation-perimeter {
    display: none;
  }

  :is(#baseCropControls, #expandCanvasControls).pxds-menu-scope .pxds-select {
    width: 100%;
    min-width: 0;
  }

  :is(#baseCropControls, #expandCanvasControls).pxds-menu-scope .pxds-select-trigger {
    height: 22px;
    min-height: 22px;
    gap: 3px !important;
    padding: 2px 5px !important;
    font-size: 7px !important;
    line-height: 1.1 !important;
  }

  #expandCanvasControls.pxds-menu-scope .pxds-select-trigger {
    box-sizing: border-box;
    height: 22px !important;
    min-height: 22px !important;
    padding-block: 2px !important;
  }

  :is(#baseCropControls, #expandCanvasControls).pxds-menu-scope .pxds-select-chevron {
    width: 10px !important;
    height: 10px !important;
  }

  :is(#baseCropControls, #expandCanvasControls).pxds-menu-scope .pxds-select-menu {
    max-height: 168px;
    padding: 3px;
  }

  :is(#baseCropControls, #expandCanvasControls).pxds-menu-scope .pxds-select-option {
    min-height: 26px;
    padding: 4px 6px;
    font-size: 8px;
  }

  #expandCanvasControls #expandCanvasPreset + .pxds-select,
  #expandCanvasControls #expandCanvasResolution + .pxds-select,
  #baseCropControls #baseCropPreset + .pxds-select {
    width: 100% !important;
    min-width: 0 !important;
  }

  #generateExpandCanvas.px-generation-action > svg {
    width: 10px;
    height: 10px;
  }

  #generateExpandCanvas .px-generation-action__cost {
    padding: 2px 4px;
    font-size: 6px;
  }

  .edit-limit-notice {
    top: auto;
    right: 14px;
    bottom: 58px;
    left: 14px;
    width: auto;
    max-width: none;
    padding: 6px 8px;
    transform: none;
    border-radius: 8px;
    font-size: 8px;
    line-height: 1.25;
  }
}

#promptSystemButton,
#promptSystemView,
.prompt-system-view {
  display: none !important;
}

#generateButton {
  cursor: pointer;
}

#generateButton:disabled {
  cursor: not-allowed;
}

/* Single-line Editor menus keep labels and native chevrons centered within the
   control height. */
.inline-intent select {
  box-sizing: border-box;
  height: 32px;
  padding-block: 0;
  font-size: 10px;
  font-weight: 750;
  line-height: 30px;
  vertical-align: middle;
}

@media (min-width: 761px) and (max-width: 1200px) {
  #expandCanvasControls,
  #baseCropControls {
    top: 8px;
    right: 8px;
    left: 8px;
    width: auto;
    max-width: none;
    min-height: 0;
    box-sizing: border-box;
    display: grid;
    column-gap: 8px;
    row-gap: 7px;
    padding: 7px;
    transform: none;
  }

  #expandCanvasControls {
    grid-template-columns: minmax(110px, 1.15fr) minmax(70px, 0.72fr) minmax(90px, 0.8fr);
    grid-template-rows: 30px 32px;
  }

  #expandCanvasControls[hidden],
  #baseCropControls[hidden] {
    display: none;
  }

  #expandCanvasControls > label {
    min-width: 0;
    display: block;
  }

  #expandCanvasControls > label:first-of-type {
    grid-column: 1;
    grid-row: 1;
  }

  #expandCanvasControls > label:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
  }

  #expandCanvasControls .pxds-select,
  #expandCanvasControls .pxds-select-trigger {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  #expandCanvasControls .pxds-select-trigger,
  #baseCropControls .pxds-select-trigger {
    height: 30px !important;
    min-height: 30px !important;
    box-sizing: border-box;
  }

  #expandCanvasSize {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    align-self: center;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
  }

  #cancelExpandCanvas {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: 32px;
    box-sizing: border-box;
  }

  #expandCanvasControls > .px-generation-action-shell--expand,
  #expandCanvasControls > #generateExpandCanvas.px-generation-action {
    grid-column: 2 / -1;
    grid-row: 2;
    place-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 32px;
  }

  #generateExpandCanvas.px-generation-action {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  #expandCanvasControls > .px-generation-action-shell--expand > .px-generation-perimeter {
    display: none;
  }

  #baseCropControls {
    grid-template-columns: minmax(120px, 1.2fr) minmax(80px, 0.8fr) minmax(90px, 0.9fr);
    grid-template-rows: 30px 32px;
  }

  #baseCropControls > label:first-of-type {
    grid-column: 1 / 3;
    grid-row: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
  }

  #baseCropControls > label:first-of-type .pxds-select {
    width: 100% !important;
    min-width: 0 !important;
  }

  #baseCropCustom {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }

  #baseCropSize {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
  }

  #cancelBaseCrop,
  #confirmBaseCrop {
    grid-row: 2;
    width: 100%;
    height: 32px;
    box-sizing: border-box;
  }

  #cancelBaseCrop {
    grid-column: 2;
  }

  #confirmBaseCrop {
    grid-column: 3;
  }
}

@media (max-width: 340px) {
  #baseCropControls > label:first-of-type {
    grid-template-columns: minmax(0, 1fr);
  }

  #baseCropControls > label:first-of-type > span,
  #baseCropCustom label > span {
    display: none;
  }

  #baseCropCustom {
    gap: 1px;
  }

  #baseCropCustom label {
    gap: 0;
  }

  #baseCropCustom input {
    width: 24px;
  }
}

#expandCanvasControls .expand-canvas-custom[hidden] {
  display: none !important;
}

.inline-intent.is-required-missing {
  color: #d92338;
}

.inline-intent select[aria-invalid="true"] {
  border-color: #e23649;
  background: #fff6f7;
  box-shadow: 0 0 0 1px rgba(226, 54, 73, 0.12);
}

/* Intent uses the same controlled menu as User UI. The form remains the
   positioning boundary, while the menu overlays the canvas instead of
   increasing the callout height. */
.inline-comment-editor.pxds-menu-scope {
  overflow: visible;
}

.inline-comment-editor.pxds-menu-scope:has(.pxds-select.is-open) {
  z-index: 40;
}

.inline-comment-editor.pxds-menu-scope .inline-intent .pxds-select {
  min-width: 0;
}

.inline-comment-editor.pxds-menu-scope .inline-intent .pxds-select-trigger {
  min-height: 32px;
  padding: 5px 9px;
  border-color: rgba(17, 24, 32, 0.2);
  color: #111820;
  background: #ffffff;
  font-size: 10px;
  font-weight: 750;
  text-transform: none;
  letter-spacing: normal;
}

.inline-comment-editor.pxds-menu-scope .inline-intent .pxds-select-trigger.has-value {
  border-color: transparent;
  color: #ffffff;
  background: var(--pxds-brand-fill);
}

.inline-comment-editor.pxds-menu-scope .inline-intent .pxds-select-trigger[aria-invalid="true"] {
  border-color: #e23649;
  color: #111820;
  background: #fff6f7;
  box-shadow: 0 0 0 1px rgba(226, 54, 73, 0.12);
}

.inline-comment-editor.pxds-menu-scope .inline-intent .pxds-select-menu {
  right: 0;
  left: 0;
  z-index: 150;
  max-height: 230px;
  color: #111820;
  background: #ffffff;
  text-transform: none;
  letter-spacing: normal;
}

.inline-comment-editor.pxds-menu-scope .inline-intent .pxds-select-option {
  min-height: 36px;
  color: #111820;
  background: transparent;
  font-size: 11px;
  text-transform: none;
  letter-spacing: normal;
}

.inline-comment-editor.pxds-menu-scope .inline-intent .pxds-select-option:is(:hover, :focus-visible) {
  background: #f0f2f5;
}

.inline-comment-editor.pxds-menu-scope .inline-intent .pxds-select-option.is-selected {
  border-color: #0b7657;
  color: #0b7657;
  background: #e8f5ef;
}

.inline-intent select[aria-invalid="true"]:focus {
  outline-color: rgba(226, 54, 73, 0.42);
}

/* Information toasts belong to the canvas, not the Generate action. Center
   them above the existing tool guidance while accounting for the rail and
   inspector columns. */
.toast-region {
  right: auto;
  bottom: 90px;
  left: calc(50% - 133px);
  justify-items: center;
  transform: translateX(-50%);
}

.toast {
  text-align: center;
}

@media (max-width: 1050px) {
  .toast-region {
    left: calc(50% - 118px);
  }
}

@media (max-width: 760px) {
  .toast-region {
    bottom: calc(22dvh + 54px);
    left: calc(50% + 27px);
    max-width: calc(100vw - 78px);
  }
}