/* Editor and auxiliary chrome only. Image planes, native view bounds, masks,
   pointer routing, popover stacking and resizing remain owned by their modules. */

body .reference-region-editor,
body .custom-ratio-dialog,
body .delete-confirmation,
body .generation-instructions-dialog,
:root[data-theme] .reference-preview-dialog,
:root[data-theme] .gallery-viewer-dialog {
  border-color: var(--line);
  background: var(--composer-card-solid);
  color: var(--text);
  box-shadow: var(--shadow-floating);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body :is(.reference-region-editor, .custom-ratio-dialog, .delete-confirmation, .generation-instructions-dialog) {
  border-radius: 18px;
}

body :is(.reference-region-editor, .custom-ratio-dialog, .delete-confirmation, .generation-instructions-dialog)::backdrop,
:root[data-theme] :is(.reference-preview-dialog, .gallery-viewer-dialog)::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Give the floating strip breathing room without changing image/mask geometry. */
#imageEditWindow .edit-image-workspace > .edit-tool-palette,
#imageEditWindow[open] .edit-image-workspace > .edit-tool-palette {
  top: calc(var(--edit-image-top, 116px) - 28px);
  padding: 8px;
}
@media (max-height: 700px) {
  #imageEditWindow .edit-image-workspace > .edit-tool-palette,
  #imageEditWindow[open] .edit-image-workspace > .edit-tool-palette {
    top: calc(var(--edit-image-top, 116px) - 20px);
    padding: 6px;
  }
}

/* Preserve the photo-width tool strip and its horizontal overflow behavior. */
#imageEditWindow .edit-image-workspace > .edit-tool-palette {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--composer-card-solid);
  box-shadow: 0 4px 14px rgb(0 0 0 / 6%);
}
#imageEditWindow .edit-image-workspace > .edit-tool-palette button {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  min-height: 34px;
  box-sizing: border-box;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
#imageEditWindow .edit-image-workspace > .edit-tool-palette button svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.6;
}
#imageEditWindow .edit-image-workspace > .edit-tool-palette button[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-faint);
  border-color: var(--accent-line);
}
#imageEditWindow .edit-tool-palette > .edit-brush-settings .edit-brush-value {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
#imageEditWindow .edit-tool-palette .edit-brush-presets button {
  padding: 0;
}
#imageEditWindow .edit-compare-handle {
  border-radius: 9px;
  box-shadow: 0 1px 4px rgb(0 0 0 / 16%);
}
#imageEditWindow .edit-compare-handle svg { width: 18px; height: 18px; }
#imageEditWindow :is(.edit-compare-before, .edit-compare-after) {
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

/* Region tools keep their existing layout and canvas coordinate system. */
.reference-region-editor .reference-region-header h2,
.custom-ratio-dialog .custom-ratio-title,
.delete-confirmation h2 {
  font-size: calc(16px + var(--app-font-increase, 1pt));
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.02em;
}
.reference-region-editor .reference-region-eyebrow { font-weight: 500; }
.reference-region-editor .reference-region-help {
  font-size: calc(11px + var(--app-font-increase, 1pt));
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.reference-region-editor .reference-region-tools {
  gap: 3px;
  border-radius: 10px;
  background: var(--surface-subtle);
}
.reference-region-editor button {
  min-height: 36px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: calc(11px + var(--app-font-increase, 1pt));
  font-weight: 500;
  line-height: 1.4;
}
.reference-region-editor .reference-region-tools button[aria-pressed="true"] {
  border-color: var(--accent-line);
  background: var(--composer-card-solid);
  color: var(--accent);
  box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
}
.reference-region-editor .reference-region-footer button {
  border-color: var(--line);
}
.reference-region-editor .reference-region-footer .reference-region-primary {
  border-color: transparent;
  color: var(--accent-ink);
  background: var(--accent);
}
.reference-region-editor .reference-region-footer .reference-region-whole {
  border-color: transparent;
}

/* Close buttons share a quiet square shape, with existing visibility intact. */
body :is(#imageEditWindow [data-close-edit], .reference-region-icon[data-close],
  #referencePreviewDialogClose, .gallery-viewer-close, #generationInstructionsDialogClose,
  .background-color-dismiss, .text-placement-dismiss, #browserSidebarClose) {
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-subtle);
  color: var(--muted);
  box-shadow: none;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
body .reference-region-icon[data-close] svg { width: 18px; height: 18px; }
.reference-preview-dialog > header {
  gap: 12px;
  background: var(--surface-subtle);
  border-bottom-color: var(--line);
}
.reference-preview-dialog > header strong { font-weight: 600; }
.reference-preview-dialog .reference-preview-navigation {
  gap: 10px;
  border-top: 1px solid var(--line);
}
.reference-preview-dialog .reference-preview-navigation button {
  min-height: 34px;
  border-radius: 8px;
  background: var(--surface-subtle);
  font: inherit;
  font-size: calc(11px + var(--app-font-increase, 1pt));
}
:root[data-theme] .gallery-viewer-meta {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--composer-card-solid);
  color: var(--muted);
  box-shadow: 0 1px 4px rgb(0 0 0 / 6%);
  font-weight: 500;
}
.gallery-viewer-arrow svg { width: 24px; height: 24px; stroke-width: 1.8; }
.gallery-viewer-help {
  font-family: inherit;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 7%);
}

/* Auxiliary choices share the same field and segmented-control treatment. */
body :is(.background-color-popover, .text-placement-popover) {
  border-color: var(--line);
  border-radius: 14px;
  background: var(--composer-card-solid);
}
.background-color-popover .background-color-title,
.text-placement-popover .text-placement-heading strong {
  font-size: calc(12px + var(--app-font-increase, 1pt));
  font-weight: 600;
  line-height: 1.4;
}
.custom-ratio-dialog .custom-ratio-modes,
.background-color-popover .color-picker-tabs {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-subtle);
}
.custom-ratio-dialog .custom-ratio-mode,
.background-color-popover .color-picker-tab {
  min-height: 34px;
  border-radius: 7px;
  font-weight: 500;
}
.custom-ratio-dialog .custom-ratio-mode[aria-pressed="true"],
.background-color-popover .color-picker-tab[aria-selected="true"] {
  background: var(--composer-card-solid);
  color: var(--accent);
  border-color: var(--accent-line);
  box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
}
.custom-ratio-dialog .custom-ratio-input,
.background-color-popover .background-color-hex-input {
  border-radius: 8px;
  background: var(--surface-focus);
  caret-color: var(--accent);
}
.background-color-popover :is(.background-color-hex-input, .background-color-apply, .background-color-clear, .color-picker-eyedropper),
.text-placement-popover .text-placement-reset {
  min-height: 34px;
  border-radius: 8px;
}
.background-color-popover .color-picker-eyedropper { flex-basis: 34px; width: 34px; height: 34px; }
.background-color-popover .color-picker-eyedropper svg { width: 18px; height: 18px; }
/* Color-picker labels remain independent of the copy editor's form labels. */
#copyEditorDialog .background-color-popover :is(.color-picker-slider-label, .color-picker-gradient-label) {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}
.text-placement-popover :is(.text-placement-position, .text-placement-depth) {
  border-radius: 9px;
  font-weight: 500;
  line-height: 1.4;
}
.text-placement-popover [aria-checked="true"] {
  border-color: var(--accent-line);
  box-shadow: none;
  color: var(--accent);
  background: var(--accent-faint);
}
.custom-ratio-dialog .custom-ratio-actions button,
.delete-confirmation button {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: calc(12px + var(--app-font-increase, 1pt));
  font-weight: 500;
  line-height: 1.4;
}
.delete-confirmation button { border-color: var(--line); }
.delete-confirmation [data-action="delete"] { border-color: var(--danger-line); }

/* The browser viewport and animated panel bounds stay unchanged. */
#browserPanel .browser-sidebar-heading strong { font-size: 13px; font-weight: 600; }
#browserPanel .browser-controls :is(button, a) {
  min-height: 34px;
  border-color: var(--line);
  border-radius: 8px;
  background: var(--surface-subtle);
  font-weight: 500;
  line-height: 1.4;
}
#browserPanel #browserAddress {
  border-color: var(--line-strong);
  background: var(--surface-focus);
  color: var(--text);
  caret-color: var(--accent);
  box-shadow: 0 1px 2px rgb(0 0 0 / 3%);
}
#browserPanel .browser-bookmark { border-radius: 7px; font-weight: 500; }
#browserPanel .browser-controls svg { width: 17px; height: 17px; }

/* Retain native macOS-like menu selection while making rows easier to target. */
.asset-context-menu button { min-height: 34px; border-radius: 6px; }
.asset-context-menu button svg { width: 16px; height: 16px; flex-basis: 16px; }
.asset-context-menu strong { font-weight: 500; }

body :is(#imageEditWindow .edit-tool-palette button, .reference-region-editor button,
  .reference-region-editor input, .reference-preview-dialog button, .gallery-viewer-close,
  .gallery-viewer-arrow, .custom-ratio-dialog button, .custom-ratio-input,
  .background-color-popover button, .background-color-hex-input,
  .text-placement-popover button, #browserPanel button, #browserPanel a, #browserAddress):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  #imageEditWindow .edit-image-workspace > .edit-tool-palette button:not(:disabled):not([aria-pressed="true"]):hover,
  body :is(.reference-region-meta button, .reference-preview-navigation button,
    #imageEditWindow [data-close-edit], .reference-region-icon[data-close],
    #referencePreviewDialogClose, .gallery-viewer-close, .background-color-dismiss,
    .text-placement-dismiss, #browserSidebarClose):not(:disabled):hover {
    color: var(--text);
    background: var(--surface-hover);
  }
  #imageEditWindow .edit-image-workspace > .edit-tool-palette button[aria-pressed="true"]:not(:disabled):hover {
    background: var(--accent-soft);
  }
  .reference-region-editor .reference-region-tools button[aria-pressed="true"]:hover {
    background: var(--accent-faint);
  }
  .text-placement-popover :is(.text-placement-position, .text-placement-depth):not([aria-checked="true"]):hover {
    background: var(--surface-hover);
  }
}

@media (pointer: coarse) {
  #imageEditWindow .edit-image-workspace > .edit-tool-palette button {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
  body :is(.reference-region-editor button, .reference-preview-navigation button,
    .custom-ratio-dialog button, .background-color-popover button, .text-placement-popover button,
    .delete-confirmation button, #browserPanel .browser-controls button, #browserPanel .browser-controls a,
    #browserPanel .browser-bookmark, .asset-context-menu button) { min-height: 44px; }
  body :is(#imageEditWindow [data-close-edit], .reference-region-icon[data-close],
    #referencePreviewDialogClose, .gallery-viewer-close, #generationInstructionsDialogClose,
    .background-color-dismiss, .text-placement-dismiss, #browserSidebarClose) {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  }
  .background-color-popover .color-picker-eyedropper { flex-basis: 44px; width: 44px; height: 44px; }
  .background-color-popover .background-color-swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gallery-viewer-chrome { grid-template-columns: 44px minmax(0, 1fr) 44px; }
}

@media (prefers-reduced-transparency: reduce) {
  body :is(.reference-region-editor, .custom-ratio-dialog, .delete-confirmation, .generation-instructions-dialog)::backdrop,
  :root[data-theme] :is(.reference-preview-dialog, .gallery-viewer-dialog)::backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  #imageEditWindow .edit-image-workspace > .edit-tool-palette button[aria-pressed="true"],
  .reference-region-editor .reference-region-tools button[aria-pressed="true"],
  .text-placement-popover [aria-checked="true"] {
    border-color: Highlight;
    color: Highlight;
  }
}

/* Separate mode navigation from the compact centered editing strip. */
/* Preview enlargement stays in the same pane; no dialog or image copy. */
#canvasPanel.is-preview-expanded:not(.is-editing-image) { grid-template-rows: minmax(0, 1fr) auto; }
#canvasPanel.is-preview-expanded:not(.is-editing-image) > :is(.canvas-toolbar, #previewNavigation) { display: none; }
#canvasPanel.is-preview-expanded:not(.is-editing-image) #canvasSurface { grid-row: 1; padding: 0; }
#canvasPanel.is-preview-expanded:not(.is-editing-image) .preview-mode-header { display: none; }
#canvasPanel.is-preview-expanded:not(.is-editing-image) #canvasImageLink { padding: 12px; container-type: size; }
#canvasPanel #canvasImageLink.opens-original { pointer-events: none; }
#canvasPanel #canvasImageLink.opens-original > img { pointer-events: auto; }
#canvasPanel.is-preview-expanded:not(.is-editing-image) #canvasImageLink img { width: min(100cqw, calc(100cqh * var(--preview-image-aspect, 1))); height: auto; cursor: zoom-out; }
.preview-expand-close { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 6; display: grid; place-items: center; width: 32px; height: 32px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface-raised); box-shadow: 0 1px 3px rgb(0 0 0 / 6%); cursor: pointer; }
.preview-expand-close[hidden] { display: none; }
.preview-expand-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.preview-expand-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.preview-shortcut-hint .preview-zoom-hint { margin-inline-start: 4px; }
.preview-shortcut-hint > :is(.preview-zoom-hint, #previewExpandEscape) { white-space: nowrap; }

/* Mode changes must not change the fitted photo or selection coordinates. */
#canvasPanel #canvasImageLink,
#canvasPanel.is-editing-image #canvasImageLink { padding: 76px 16px 16px; transition: none; }
#canvasPanel.is-editing-image #canvasImageLink img {
  --shadow-image: 0 24px 54px rgb(0 122 255 / 24%);
  box-shadow: 0 4px 16px rgb(0 122 255 / 22%);
}
#imageEditWindow .edit-image-workspace > .edit-tool-palette,
#imageEditWindow[open] .edit-image-workspace > .edit-tool-palette {
  top: 64px; left: 50%; right: auto; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 24px); padding: 6px 10px;
  justify-content: safe center;
}
#imageEditWindow .edit-tool-palette > .edit-brush-settings input[type=range] {
  width: 152px; min-width: 152px; max-width: 152px; flex: 0 0 152px;
}
#canvasSurface .preview-mode-header > .preview-edit-toggle:disabled { opacity: .45; cursor: default; }
#canvasPanel.is-editing-image .edit-mode-glow::before {
  inset: -8px;
  box-shadow: 0 14px 36px rgb(0 0 0 / 22%), 0 0 38px 10px rgb(0 122 255 / 38%);
  animation: edit-shadow-breathe-visible 3.6s ease-in-out infinite;
}
@keyframes edit-shadow-breathe-visible {
  0%, 100% { opacity: .2; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #canvasPanel.is-editing-image .edit-mode-glow::before { animation: none; opacity: .65; }
}

#mainEditReference { width:100%; min-width:0; box-sizing:border-box; margin-top:0; padding:12px 8px 0; border-top:0; }
#mainEditReference[hidden] { display: none; }
#mainEditReference h3 { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
#mainEditReference .edit-reference-box { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; width:100%; }
#mainEditReference .edit-reference-slot { position:relative; min-width:0; aspect-ratio:1; border:1px dashed var(--line-strong); border-radius:12px; overflow:hidden; background:var(--composer-card-solid); }
#mainEditReference [data-ref-choose] { display: grid; place-items: center; width: 100%; height: 100%; padding: 8px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; }
#mainEditReference img { width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 6px; }
#mainEditReference [hidden] { display: none; }
#mainEditReference [data-ref-remove] { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--composer-card-solid); color: var(--text); }
#mainEditReference button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
#mainEditReference .edit-reference-slot.is-drag-over,
#imageEditWindow .edit-reference-slot.is-drag-over {
  border-color:var(--accent); border-style:solid;
  background:color-mix(in srgb,var(--accent) 16%,var(--composer-card-solid));
  box-shadow:inset 0 0 0 1px var(--accent);
}
#mainEditReference .edit-reference-slot.is-drag-over [data-ref-choose],
#imageEditWindow .edit-reference-slot.is-drag-over [data-ref-choose] { color:var(--accent); }
/* Reference capacity is separate from saved attachment count. */
.reference-capacity-note { margin: 10px 4px 0; color: var(--text-secondary, #8e8e93); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.reference-capacity-note[hidden] { display: none; }

/* The existing editor toolbar/selection chrome remains the visual reference.
   Legacy fields stay mounted for drafts; editing now happens on the canvas. */
#copyEditorDialog #promptPresetDetailField,
#copyEditorDialog .typography-layout-options { display:none !important; }
.copy-layout-canvas[data-adding="true"],
.copy-layout-canvas[data-adding="true"] * { cursor:crosshair; }
.copy-layout-toolbar { display:flex; flex-wrap:wrap; overflow:visible; }
.copy-layout-toolbar .copy-layout-font { max-width:140px; min-width:84px; height:30px; }
.copy-layout-toolbar .copy-layout-angle { width:64px; height:30px; padding:4px 6px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--text); font:inherit; font-size:12px; }
.copy-layout-toolbar > input[type="range"] { width:84px; }
.copy-layout-rotate { display:none; position:absolute; top:-30px; left:calc(50% - 10px); width:20px; height:20px; min-height:0; padding:2px; border:1px solid var(--accent); border-radius:50%; color:var(--accent); background:var(--surface-raised); touch-action:none; }
.copy-layout-box[data-selected="true"] .copy-layout-rotate { display:flex; align-items:center; justify-content:center; }
.copy-layout-rotate .copy-layout-symbol { width:14px; height:14px; }
@media (max-width:480px) { .copy-layout-toolbar > * { grid-area:auto !important; } .copy-layout-toolbar .copy-layout-font { max-width:110px; } }