/* Canvas navigation and tools float above the full drawing surface. */
#imageStudio.is-canvas { --canvas-tools-top:calc(12px + var(--editor-chrome-height)); --canvas-selection-top:var(--canvas-tools-top); }
#imageStudio .canvas-project-bar { display:flex; align-items:center; min-width:0; gap:6px; }
#imageStudio .canvas-project { display:block; flex:0 1 auto; min-width:0; max-width:200px; height:var(--editor-chrome-height); border:0; border-radius:6px; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#imageStudio .canvas-save { color:var(--muted); font-size:13px; white-space:nowrap; }
#imageStudio .canvas-retry { min-height:44px; text-decoration:underline; }
#imageStudio.is-canvas .studio-gallery { outline:none; position:absolute; inset:0; overflow:hidden; padding:0; scrollbar-gutter:auto; background:#fff radial-gradient(#d6d6d6 1px,transparent 1px); background-size:20px 20px; touch-action:pinch-zoom; cursor:default; }
/* Every layout keeps the same navigation geometry, typography and icon sizing. */
#imageStudio.has-art-canvas .studio-header { position:relative; height:var(--editor-chrome-height); padding:0 8px; z-index:5; gap:8px; }
#imageStudio.is-canvas .studio-header { background:none; pointer-events:none; }
#imageStudio.is-canvas .studio-header :is(button,a,input) { pointer-events:auto; }
#imageStudio.has-art-canvas .studio-header-start, #imageStudio.has-art-canvas .studio-header-end { gap:6px; }
#imageStudio.has-art-canvas .studio-header-start { flex:1; }
/* A viewport status stays outside the movable composer's clipping container.
   The root follows the visual viewport, including keyboard pans and rotation. */
#imageStudio.is-canvas > .studio-progress-overlay { top:116px; bottom:auto; left:50%; max-width:calc(100% - 24px); z-index:6; backdrop-filter:blur(12px); }
#imageStudio.is-canvas > .studio-progress-overlay .studio-batch[data-state=running] { white-space:normal; }
#imageStudio.has-art-canvas .studio-home, #imageStudio.has-art-canvas .studio-header [data-icon=chevron] { display:none; }
#imageStudio .canvas-tools, #imageStudio .canvas-view-tools, #imageStudio .canvas-selection-tools { border:0; border-radius:8px; background:var(--editor-tool-surface); color:#fff; backdrop-filter:blur(12px); }
#imageStudio.has-art-canvas .studio-title { padding:0 12px; }
#imageStudio.has-art-canvas .studio-header :is(.studio-layout,.studio-menu,.studio-balance) { height:var(--editor-chrome-height); min-width:var(--editor-chrome-height); margin:0; }
#imageStudio.has-art-canvas .studio-balance { padding:0 10px; }

#imageStudio.is-canvas .canvas-save { color:#635b66; }
#imageStudio.has-art-canvas:not(.is-canvas) .studio-header :is(.studio-title,.studio-layout,.studio-menu,.studio-balance):hover { background:#e9e9e9; }
/* Separate translucent tabs leave the top center visible and interactive. */
#imageStudio.is-canvas .studio-header :is(.studio-title,.studio-layout,.studio-menu,.studio-balance) { border-radius:0 0 6px 6px; background:var(--editor-tool-surface); color:#fff; backdrop-filter:blur(12px); }
/* Match the Edit toolbar's highlight without replacing a tab's dark surface. */
#imageStudio.is-canvas .studio-header :is(.studio-title,.studio-layout,.studio-menu,.studio-balance):hover { background-image:linear-gradient(var(--editor-tool-hover),var(--editor-tool-hover)); }
#imageStudio.is-canvas[data-input=keyboard] .studio-header :is(button,a):focus-visible { background:var(--editor-tool-focus); }
#imageStudio.is-canvas[data-input=keyboard] .studio-header :is(button,a):focus-visible { outline:2px solid #fff; outline-offset:-3px; }
#imageStudio.is-canvas .studio-results { position:absolute; inset:0 auto auto 0; width:0; height:0; display:block; margin:0; transform-origin:0 0; z-index:1; }
#imageStudio.is-canvas .studio-card { box-shadow:none; border-radius:2px; cursor:default; }
#imageStudio.is-canvas .studio-artwork { inset:0; transform:none; width:100%!important; height:100%!important; cursor:default; border-radius:2px; overflow:hidden; }
#imageStudio.is-canvas .studio-artwork>img { object-fit:contain; user-select:none; -webkit-user-drag:none; }
#imageStudio.is-canvas .studio-artwork[aria-pressed=true] { border-radius:2px; }
/* Hover, selection and drop feedback share one screen-space outline. */
#imageStudio.is-canvas .studio-card::after { content:''; position:absolute; inset:0; outline:calc(2px / var(--canvas-zoom,1)) solid transparent; outline-offset:calc(2px / var(--canvas-zoom,1)); pointer-events:none; }
@media(any-hover:hover) {
  #imageStudio.is-canvas .studio-card:has(.studio-artwork:hover):not(.canvas-selected):not(.canvas-target)::after { outline-color:#bdb7c0; }
}
#imageStudio.is-canvas .studio-card.canvas-selected::after { outline-color:#775785; }
#imageStudio.is-canvas .studio-card.canvas-target::after { outline-color:#593366; }
#imageStudio.is-canvas .studio-artwork.is-sketching { outline:none; }
#imageStudio.is-canvas .canvas-dragging { opacity:.6; cursor:grabbing; }
#imageStudio.is-canvas .studio-gallery :is(.studio-actions,.studio-animate,.studio-check),
#imageStudio.is-canvas :is(.studio-more,.studio-ideas,.studio-headshot-ad,.studio-new-images) { display:none!important; }
#imageStudio.is-canvas.canvas-panning .studio-gallery, #imageStudio.is-canvas.canvas-panning .studio-artwork { cursor:grab; }
#imageStudio.is-canvas.canvas-creating .studio-gallery, #imageStudio.is-canvas.canvas-creating .studio-artwork { cursor:crosshair; }
#imageStudio .canvas-tools { position:absolute; top:0; left:50%; transform:translateX(-50%); display:flex; align-items:center; padding:1px; gap:2px; min-height:var(--editor-chrome-height); z-index:3; pointer-events:auto; }
#imageStudio.is-canvas .studio-header-start,
#imageStudio.is-canvas .studio-header-end { max-width:calc(50% - (3 * var(--editor-chrome-control) + 6px) / 2 - 12px); }
#imageStudio.is-canvas .studio-header-start > h1 { flex:none; }
#imageStudio.is-canvas .canvas-project-bar { flex:1; }
#imageStudio .canvas-view-tools { position:absolute; right:12px; bottom:12px; display:flex; align-items:center; gap:2px; height:36px; padding:0 6px; border-radius:10px; z-index:3; }
#imageStudio .canvas-view-tools button { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; color:#fff; }
#imageStudio .canvas-view-tools button:hover { background:var(--editor-tool-hover); }
#imageStudio .canvas-view-tools button:focus-visible { outline:2px solid #fff; outline-offset:-2px; }
#imageStudio .canvas-view-tools button :is(img,svg) { width:16px; height:16px; }
#imageStudio .canvas-view-tools button img { filter:brightness(0) invert(1); }
#imageStudio .canvas-view-tools output { min-width:44px; padding:0 8px; text-align:center; font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; }
@media(max-width:760px),(any-pointer:coarse),(hover:none) {
  #imageStudio .canvas-view-tools { height:46px; }
  #imageStudio .canvas-view-tools button { width:44px; height:44px; }
}
#imageStudio .canvas-tools button, #imageStudio .canvas-selection-tools button { display:flex; align-items:center; justify-content:center; gap:7px; position:relative; min-width:var(--editor-chrome-control); height:var(--editor-chrome-control); border-radius:7px; color:#fff; }
#imageStudio .canvas-tools button:hover, #imageStudio .canvas-selection-tools button:hover { background:#ffffff20; }
#imageStudio .canvas-tools button[aria-pressed=true] { background:#ffffff30; }
#imageStudio .canvas-tool-divider { height:20px; border-left:1px solid #ffffff40; margin:0 3px; }
#imageStudio .canvas-selection-tools { position:absolute; top:var(--canvas-selection-top); left:50%; transform:translateX(-50%); display:flex; align-items:center; padding:1px; gap:2px; min-height:var(--editor-chrome-height); z-index:4; }
#imageStudio [data-selection-count] { padding:0 12px; white-space:nowrap; }
#imageStudio .canvas-marquee { position:absolute; border:1px solid #775785; background:#77578516; pointer-events:none; z-index:2; }
#imageStudio .canvas-create-preview { z-index:102; background:#ffffffb3; }
#imageStudio .canvas-pending-block { display:none; position:absolute; background:#fff; pointer-events:none; z-index:102; }
#imageStudio.is-canvas .canvas-pending-block { display:block; }
#imageStudio .canvas-create-preview::after { content:attr(data-size); position:absolute; top:100%; left:0; margin-top:4px; padding:3px 6px; background:#593366; color:#fff; border-radius:4px; font-size:12px; white-space:nowrap; }
#imageStudio:has(.bx-stage) .canvas-project-bar, #imageStudio:has(.bx-stage) .canvas-tools, #imageStudio:has(.bx-stage) .canvas-view-tools { display:none; }
#imageStudio .canvas-drop-hint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:20px; background:#fff; border-radius:inherit; pointer-events:none; z-index:6; }
#imageStudio .canvas-drop-images { display:flex; flex:none; height:min(76px,calc(100% - 20px)); }
#imageStudio .canvas-drop-images img { height:100%; width:auto; aspect-ratio:1; object-fit:cover; border-radius:8px; box-shadow:0 2px 8px #302a3133; transform:rotate(-4deg); }
#imageStudio .canvas-drop-images [data-drop-target] { margin-left:-20px; transform:rotate(3deg); outline:2px solid #fff; }
#imageStudio .canvas-drop-text { display:flex; flex-direction:column; gap:4px; text-align:left; white-space:nowrap; font:400 16px 'Source Sans Pro',sans-serif; color:#38363b; }
#imageStudio .canvas-drop-hint .studio-quote { gap:5px; font-size:13px; font-weight:400; color:#77717c; }
#imageStudio .canvas-drop-hint .studio-quote img { width:15px; height:15px; transform:none; }
#imageStudio .canvas-strength { position:absolute; left:0; top:100%; display:flex; align-items:center; gap:8px; padding:0 8px; margin-top:6px; background:#fff; border:1px solid #ece7ee; border-radius:8px; width:max-content; max-width:300px; z-index:2; }
#imageStudio .canvas-strength button { min-width:44px; min-height:44px; white-space:nowrap; }
#imageStudio .canvas-strength label { font-size:0; }
#imageStudio .canvas-strength input { width:90px; }
#imageStudio.is-canvas .canvas-strength { transform:scale(calc(1 / var(--canvas-zoom,1))); transform-origin:top left; }
#imageStudio dialog.canvas-project-panel { display:flex; flex-direction:column; overflow:hidden; padding:12px; }
#imageStudio dialog.canvas-project-panel:not([open]) { display:none; }
#imageStudio .canvas-project-panel .studio-panel-head { flex:none; }
#imageStudio .canvas-project-body { min-height:0; overflow:auto; overscroll-behavior:contain; }

#imageStudio .canvas-project-row { display:flex; align-items:center; gap:2px; min-width:0; }
#imageStudio .canvas-project-select { flex:1; min-width:0; }
#imageStudio .canvas-project-select>span { min-width:0; white-space:nowrap; }
#imageStudio .canvas-project-label { overflow:hidden; text-overflow:ellipsis; }
#imageStudio .canvas-project-current { flex:none; width:18px; display:grid; place-items:center; }
#imageStudio .canvas-project-current svg { width:16px; height:16px; }
#imageStudio .canvas-project-row>.studio-icon { flex:none; width:var(--editor-chrome-control); height:var(--editor-chrome-control); }
#imageStudio .canvas-project-rename { display:flex; flex-wrap:wrap; align-items:center; gap:2px; flex:1; min-width:0; padding:4px 0; }
#imageStudio .canvas-project-rename input { min-width:0; width:0; flex:1; height:var(--editor-chrome-control); padding:0 8px; border:1px solid #706774; border-radius:6px; background:#fff; color:var(--ink); font:inherit; font-size:16px; }
#imageStudio .canvas-project-rename .studio-icon { width:var(--editor-chrome-control); height:var(--editor-chrome-control); flex:none; }
#imageStudio .canvas-project-rename p, #imageStudio .canvas-project-message { flex-basis:100%; margin:6px 0; color:#8b3d42; font-size:14px; }
#imageStudio .canvas-delete-name { margin:8px 0; overflow-wrap:anywhere; }
#imageStudio .canvas-delete-images { display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 0; cursor:pointer; }
#imageStudio .canvas-delete-images input { flex:none; width:20px; height:20px; accent-color:var(--accent); }
#imageStudio .canvas-delete-images small { display:block; margin-top:4px; font-size:13px; color:#706774; }
#imageStudio .canvas-delete-message { margin:4px 0; font-size:13px; overflow-wrap:anywhere; }
#imageStudio .canvas-delete-message:empty { display:none; }
#imageStudio .canvas-delete-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
#imageStudio .canvas-delete-actions button { min-height:44px; padding:8px 14px; border-radius:6px; }
#imageStudio .canvas-delete-actions button:hover { background:#f2edf3; }
#imageStudio .canvas-delete-actions .canvas-delete-confirm { color:#fff; background:#8b3d42; }
#imageStudio .canvas-delete-actions .canvas-delete-confirm:disabled { opacity:.6; }
/* This feature does not alter the shared editors' docking or sizing. */
#imageStudio :is(.canvas-composer-chrome,.canvas-composer-resize,.canvas-composer-settings) { display:none; }
#imageStudio.is-canvas .studio-composer-wrap { position:absolute; width:600px; max-width:calc(100% - 16px); max-height:var(--canvas-composer-max-height); margin:0; padding:0; border:1px solid #e5e0e7; border-radius:12px; background:#fffffff2; box-shadow:0 4px 24px #302a311c; z-index:4; overflow:auto; overscroll-behavior:contain; container-type:inline-size; }
#imageStudio.is-canvas .studio-composer { padding:0 14px 8px; border-radius:12px; background:none; }
#imageStudio.is-canvas .studio-composer-wrap .studio-edit-row { display:none; }
#imageStudio.is-canvas.canvas-brushing .studio-edit-row:has(> :not([hidden])) { display:flex; }
#imageStudio.is-canvas.canvas-brushing .ws-toolbar:not(.is-dockable) { transform:none; }
#imageStudio.is-canvas.canvas-brushing .ws-toolbar:not(.is-dockable) .ws-toolbar-handle { display:none; }
#imageStudio.is-canvas #studioPrompt { min-height:24px; max-height:min(220px,var(--canvas-prompt-max-height,220px)); background:transparent; }
#imageStudio.is-canvas .canvas-composer-chrome { position:relative; display:flex; align-items:center; height:var(--editor-chrome-height); padding:0 6px; }
#imageStudio.is-canvas .canvas-composer-window-tools { display:flex; align-items:center; margin-left:auto; }
#imageStudio.is-canvas .canvas-composer-chrome :is(.studio-composer-toggle,.canvas-composer-resize,.canvas-composer-dock) { position:static; display:grid; place-items:center; width:var(--editor-chrome-height); height:var(--editor-chrome-height); border-radius:6px; color:#8d8392; }
#imageStudio.is-canvas .canvas-composer-chrome button:hover { background:var(--menu-hover); }
#imageStudio.is-canvas .studio-prompt-wrap.has-composer-toggle #studioPrompt { width:100%; margin-right:0; }
#imageStudio.is-canvas .canvas-composer-handle { position:absolute; top:0; left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; width:60px; height:var(--editor-chrome-height); color:#8d8392; cursor:grab; touch-action:pinch-zoom; }
#imageStudio.is-canvas .canvas-composer-handle svg { width:20px; height:25px; transform:rotate(90deg); fill:currentColor; stroke:none; pointer-events:none; }

#imageStudio.is-canvas .canvas-composer-dock svg { width:18px; height:18px; }
#imageStudio.is-canvas .canvas-composer-resize { cursor:nwse-resize; touch-action:pinch-zoom; }
#imageStudio.is-canvas .canvas-composer-resize svg { width:18px; height:18px; }
/* Reuse the Art welcome in one viewport region across layouts, independent of
   composer movement. Short screens scroll this region, never the document. */
#imageStudio.has-art-canvas #studioEmpty.has-welcome:has(#studioWelcome) { position:fixed; inset:calc(var(--viewport-top) + 112px) 0 auto; height:max(0px,calc(var(--viewport) - 257px)); min-height:0; overflow:auto; overscroll-behavior:contain; justify-content:safe center; }
#imageStudio.is-canvas:not(.canvas-creating) .studio-gallery:has(#studioEmpty.has-welcome:not([hidden])) { touch-action:pan-y pinch-zoom; }
/* Choosing creation clears the welcome before the gesture, without moving chrome. */
#imageStudio.is-canvas:has([data-canvas-tool=create][aria-pressed=true]) #studioEmpty,
#imageStudio.is-canvas.canvas-block-pending #studioEmpty { visibility:hidden; pointer-events:none; }
#imageStudio.is-canvas #studioEmpty>p:empty { display:none; }
#imageStudio .studio-empty-upload { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 12px; border-radius:6px; font-size:14px; }
#imageStudio .studio-empty-upload svg { width:20px; height:20px; }
#imageStudio .studio-empty-upload:hover { background:var(--menu-hover); }
@media(max-height:360px) {
  #imageStudio.is-canvas #studioEmpty .studio-empty-upload { display:none; }
}
#imageStudio .canvas-setting-summary { min-height:52px; }
#imageStudio .canvas-setting-summary>span:first-child { flex:1; }
#imageStudio .canvas-setting-summary .canvas-setting-value { justify-content:flex-end; gap:8px; max-width:55%; text-align:right; color:var(--muted); }
#imageStudio .canvas-setting-value span { overflow-wrap:anywhere; }
#imageStudio .canvas-setting-value img { flex:none; width:28px; height:28px; border-radius:4px; object-fit:cover; }
#imageStudio .canvas-setting-options { padding:0 6px 8px 16px; border-bottom:1px solid #eee; margin-bottom:6px; }
#imageStudio .canvas-setting-options .studio-option { min-height:44px; }
#imageStudio .canvas-setting-options .studio-option[aria-pressed=true] { color:#403c43; background:#f4f4f4; }
#imageStudio.is-canvas .canvas-composer-settings { width:44px; height:44px; }
#imageStudio.is-canvas .studio-composer .studio-attach { width:44px; height:44px; }
#imageStudio.is-canvas .studio-composer .studio-choices { gap:8px; }
#imageStudio.is-canvas .studio-composer-row { gap:6px; }
#imageStudio.is-canvas .studio-edit-context { margin-bottom:2px; }
@media(min-width:600px) {
@container (max-width:478px) {
  #imageStudio.is-canvas .studio-composer .studio-choices > :is(.studio-thumbnail,.studio-setting) { display:none; }
  #imageStudio.is-canvas .canvas-composer-settings { display:inline-flex; }
}
}
@media(max-width:900px) {
  #imageStudio .canvas-selection-tools { left:8px; transform:none; }
  #imageStudio .canvas-save { position:absolute; top:48px; right:4px; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
}
@media(max-width:540px) {
  #imageStudio.has-art-canvas .studio-header { gap:4px; }
  #imageStudio.has-art-canvas .studio-header-start, #imageStudio.has-art-canvas .studio-header-end { gap:4px; }
  #imageStudio.has-art-canvas .studio-balance { display:none; }
  #imageStudio .canvas-project-bar { flex:1; overflow:hidden; }
  #imageStudio .canvas-project { max-width:100%; }
  #imageStudio.has-art-canvas .studio-title { padding:0 10px; }
}

#imageStudio.is-canvas .canvas-composer-sized #studioPrompt { height:var(--canvas-prompt-height)!important; max-height:var(--canvas-prompt-max-height); }
#imageStudio.is-canvas.is-composer-collapsed #studioPrompt { height:24px!important; max-height:24px; }

#imageStudio.is-canvas.canvas-brushing .bx-body { position:absolute; inset:56px 0 max(var(--canvas-brush-bottom,220px),var(--canvas-palettes-bottom,0px)); }
#imageStudio.is-canvas.canvas-brushing .canvas-composer-chrome :is(.canvas-composer-dock,.canvas-composer-resize) { display:none; }
/* Area editing keeps its controls together and reserves a usable image pane. */
#imageStudio.is-canvas.canvas-brushing .canvas-composer-chrome, #imageStudio.is-canvas.canvas-brushing .canvas-composer-chrome .studio-composer-toggle { height:28px; }
#imageStudio.is-canvas.canvas-brushing .canvas-composer-handle { display:none; }
#imageStudio.is-canvas.canvas-brushing .studio-composer-wrap { padding-bottom:0; }
#imageStudio.is-canvas.canvas-brushing .studio-edit-row { margin-bottom:0; }
#imageStudio.is-canvas .studio-card:not(.canvas-selected) .canvas-strength { display:none; }

/* Menu affordances are conveyed by their icons and labels in Canvas. */
#imageStudio.is-canvas [data-icon=chevron] { display:none; }
#imageStudio .canvas-project-panel .studio-panel-head { gap:4px; }
#imageStudio .canvas-project-panel .studio-panel-head h2 { display:flex; align-items:center; gap:8px; flex:none; }
#imageStudio .canvas-project-panel .studio-panel-head button { width:var(--editor-chrome-control); height:var(--editor-chrome-control); }
#imageStudio .canvas-project-panel .studio-panel-head [data-close] { margin-left:auto; }
#imageStudio .canvas-guest-note { position:absolute; right:12px; bottom:12px; display:flex; align-items:center; max-width:calc(100% - 24px); border-radius:8px; background:#fff; border:1px solid #e5e0e7; box-shadow:0 3px 16px #302a3114; z-index:5; }
#imageStudio .canvas-guest-note button { display:flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 12px; white-space:nowrap; }
#imageStudio .canvas-guest-note [data-canvas-dismiss-save] { width:44px; padding:0; color:#817a83; }
#imageStudio .canvas-guest-note [data-canvas-dismiss-save] svg { width:14px; height:14px; }
#imageStudio .canvas-tip, #imageStudio .canvas-tip-bulb { position:absolute; left:12px; bottom:12px; border:1px solid #e5e0e7; border-radius:8px; background:#fffffff2; color:#635b66; box-shadow:0 3px 16px #302a3114; z-index:3; }
#imageStudio .canvas-tip { width:280px; max-width:calc(100% - 24px); padding:8px 12px; z-index:0; pointer-events:none; }
#imageStudio .canvas-tip button { pointer-events:auto; }
#imageStudio .canvas-tip-head { display:flex; align-items:center; gap:8px; margin:-4px -8px 4px 0; }
#imageStudio .canvas-tip-head>svg { width:18px; height:18px; flex:none; }
#imageStudio .canvas-tip-head>span { flex:1; }
#imageStudio .canvas-tip-text { margin:0; line-height:1.45; color:var(--ink); }
#imageStudio .canvas-tip-nav { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
#imageStudio .canvas-tip-nav [data-tip-progress] { font-size:13px; color:var(--muted); }
#imageStudio :is(.canvas-tip,.canvas-hints-panel) button { flex:none; display:grid; place-items:center; width:var(--editor-chrome-control); height:var(--editor-chrome-control); border-radius:6px; }
#imageStudio :is(.canvas-tip,.canvas-hints-panel) button:hover, #imageStudio .canvas-tip-bulb:hover { background:var(--menu-hover); }
#imageStudio :is(.canvas-tip,.canvas-hints-panel) button svg { width:16px; height:16px; }
#imageStudio [data-canvas-next-tip] svg { transform:rotate(90deg); }
#imageStudio [data-canvas-prev-tip] svg { transform:rotate(-90deg); }
#imageStudio .canvas-tip-bulb { display:grid; place-items:center; width:var(--editor-chrome-height); height:var(--editor-chrome-height); border-radius:50%; }
#imageStudio .canvas-tip-bulb svg { width:18px; height:18px; }

/* Image editing uses the same palette and icons as Image Generator. */
#imageStudio.is-canvas .canvas-image-tools { max-width:calc(100% - 16px); z-index:140; }
#imageStudio.is-canvas .canvas-image-tools .ws-brushtools { min-width:0; flex-wrap:wrap; }
#imageStudio.is-canvas .canvas-image-tools .ws-brushbar { min-width:0; }
#imageStudio.is-canvas .canvas-image-tools .bx-history { position:relative; inset:auto; }
@media(min-width:600px) and (max-width:1100px){
  #imageStudio .canvas-selection-tools { right:8px; left:auto; transform:none; }
}

/* Preserve drawing space while keeping errors readable through internal scrolling. */
#imageStudio.is-canvas.canvas-brushing .studio-feedback { max-height:64px; }
#imageStudio.is-canvas.canvas-brushing .canvas-selection-tools { top:0; left:80px; right:auto; transform:none; }
@media(max-height:520px) {
  #imageStudio.is-canvas.canvas-brushing .studio-feedback { max-height:40px; }
}


/* Canvas palettes consume the same chrome size as shared editor tools. */
#imageStudio.is-canvas [data-canvas-resize] { padding:0 10px; font-size:13px; font-variant-numeric:tabular-nums; }
#imageStudio.is-canvas :is(.canvas-image-tools,.sketch-toolbar) button { height:var(--editor-chrome-control); min-height:var(--editor-chrome-control); }
#imageStudio.is-canvas .sketch-controls { flex-wrap:nowrap; }
#imageStudio.is-canvas .sketch-toolbar button:not(.ws-toolbar-handle) { min-width:var(--editor-chrome-control); width:var(--editor-chrome-control); padding:0; flex:none; }
#imageStudio.is-canvas .sketch-toolbar .ws-toolbar-handle { min-width:24px; width:24px; }
#imageStudio.is-canvas .canvas-image-tools .ws-brushtools { flex-wrap:nowrap; }
#imageStudio.is-canvas .canvas-brush-swatch { width:22px; height:22px; border-radius:50%; background:var(--sketch-color); box-shadow:inset 0 0 0 1px #fff; }
#imageStudio.is-canvas .sketch-toolbar.is-dockable[data-orientation=vertical] button .canvas-brush-swatch { display:block; }
#imageStudio .canvas-brush-size { padding:0 12px; }
#imageStudio .canvas-brush-color { display:flex; align-items:center; justify-content:space-between; margin:12px; padding-top:8px; border-top:1px solid #e7e5e8; }
#imageStudio .canvas-brush-color input { width:48px; height:44px; padding:4px; background:none; border:0; }
#imageStudio .canvas-size-preset { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
#imageStudio .canvas-size-preset select { width:100%; min-height:44px; padding:8px; font:inherit; color:inherit; background:#fff; border:1px solid #d9d2dc; border-radius:6px; }
#imageStudio .canvas-menu-action { border-top:1px solid #eee; margin-top:6px; }
@media(max-width:760px),(pointer:coarse) {
  #imageStudio.is-canvas [data-canvas-resize] { font-size:14px; }
}
@media(max-width:599px) {
  #imageStudio.is-canvas { --canvas-selection-top:calc(var(--canvas-tools-top) + var(--editor-chrome-height) + 12px); }
  #imageStudio.is-canvas.canvas-brushing .canvas-selection-tools { top:0; }
}
@media(max-width:380px) {
  #imageStudio.is-canvas .canvas-tools { gap:0; }
  #imageStudio.is-canvas .canvas-image-tools .bx-history { padding-left:4px; }
  #imageStudio.is-canvas .canvas-image-tools .ws-sep { margin:0 2px; }
}

/* Progress clears both toolbar rows after their shared height is applied. */
#imageStudio.is-canvas > .studio-progress-overlay { top:calc(var(--canvas-tools-top) + var(--editor-chrome-height) + 8px); }
@media(max-width:599px) {
  #imageStudio.is-canvas:has(.canvas-selection-tools:not([hidden])) > .studio-progress-overlay { top:calc(var(--canvas-selection-top) + var(--editor-chrome-height) + 8px); }
}

/* Canvas brush controls show diameter and color; exact pixels stay in the picker. */
#imageStudio.has-art-canvas :is(.canvas-brush-button,.bx-sizebtn) [data-brush-value] { display:none!important; }
#imageStudio.has-art-canvas .bx-sizebtn .bx-dot { box-shadow:inset 0 0 0 1px #ffffffb3; }

/* The existing selection toolbar follows the selected image in screen space. */
#imageStudio.is-canvas .canvas-selection-tools { right:auto; transform:none; background:var(--editor-tool-surface); }
#imageStudio.is-canvas .canvas-selection-tools button { width:var(--editor-chrome-control); flex:none; padding:0; }
#imageStudio.is-canvas .canvas-selection-tools button:hover { background:var(--editor-tool-hover); }
#imageStudio.is-canvas .canvas-selection-tools [data-canvas-resize] { width:auto; padding:0 10px; }
#imageStudio.is-canvas .canvas-selection-tools::after { content:''; position:absolute; left:var(--canvas-tail); top:100%; width:14px; height:7px; transform:translateX(-50%); background:var(--editor-tool-surface); clip-path:polygon(0 0,100% 0,50% 100%); pointer-events:none; }
#imageStudio.is-canvas .canvas-selection-tools[data-side=below]::after { top:auto; bottom:100%; clip-path:polygon(50% 0,100% 100%,0 100%); }
#imageStudio.is-canvas .canvas-strength-slider { display:block; width:100%; accent-color:var(--accent); }
#imageStudio.is-canvas .canvas-strength-row { display:flex; align-items:center; gap:12px; }
#imageStudio.is-canvas .canvas-strength-row output { margin-right:auto; }
#imageStudio.is-canvas .canvas-strength-row .studio-quote { gap:3px; font-size:15px; color:var(--muted); }
#imageStudio.is-canvas .canvas-strength-row .studio-quote img { width:18px; height:18px; }
#imageStudio.is-canvas .canvas-strength-panel .studio-panel-head [data-close] { width:44px; height:44px; }
#imageStudio.is-canvas .canvas-strength-row .studio-send { width:44px; height:44px; border:4px solid white; }

@media(max-width:599px) {
  #imageStudio.is-canvas .canvas-tools,
  #imageStudio.is-canvas .canvas-view-tools,
  #imageStudio.is-canvas .canvas-composer-chrome,
  #imageStudio.is-canvas .canvas-composer-settings,
  #imageStudio.is-canvas .studio-header-start > h1,
  #imageStudio.is-canvas .studio-header-end > :not([data-menu=utility]),
  #imageStudio.is-canvas.canvas-phone-selected .studio-thumbnail,
  #imageStudio.is-canvas .ws-toolbar-handle { display:none; }
  #imageStudio.is-canvas .studio-header-start,
  #imageStudio.is-canvas .studio-header-end { max-width:none; }
  #imageStudio.is-canvas .studio-gallery { touch-action:none; }
  #imageStudio.is-canvas .studio-composer-wrap { background:#fff; }
  #imageStudio.is-canvas .studio-composer { padding:12px 8px 2px 15px; }
  #imageStudio.is-canvas .studio-composer-row { height:44px; margin-top:4px; gap:0; }
  #imageStudio.is-canvas .studio-composer .studio-choices { gap:0; flex:none; }
  #imageStudio.is-canvas .studio-composer .studio-choices > :is(.studio-thumbnail,.studio-setting) { display:flex; }
  #imageStudio.is-canvas.canvas-phone-selected .studio-composer .studio-choices > .studio-thumbnail { display:none; }
  #imageStudio.is-canvas .studio-composer :is(.studio-thumbnail,.studio-setting,.studio-attach) { width:44px; height:44px; min-width:44px; min-height:44px; padding:0; justify-content:center; flex:none; }
  #imageStudio.is-canvas .studio-composer .studio-attach { order:-1; margin-left:-15px; }
  #imageStudio.is-canvas .studio-thumbnail > img { width:32px; height:32px; border-radius:5px; }
  #imageStudio.is-canvas .studio-send-group { margin-left:auto; gap:8px; }
  #imageStudio.is-canvas .studio-composer-row .studio-quote { gap:3px; font-size:15px; color:var(--muted); }
  #imageStudio.is-canvas .studio-composer-row .studio-quote img { width:18px; height:18px; }
  /* A 36px accent circle inside the toolbar's 44px hit target. */
  #imageStudio.is-canvas .studio-send { width:44px; height:44px; border:4px solid white; }
  #imageStudio.is-canvas .studio-composer .studio-setting { font-size:15px; }
  #imageStudio.is-canvas .studio-edit-row { display:none!important; }
  #imageStudio.is-canvas .ws-toolbar.is-dockable { flex-direction:row; }
  #imageStudio.is-canvas .ws-toolbar .ws-brushbar { max-width:none; flex-wrap:nowrap; }
  #imageStudio.is-canvas .canvas-image-tools .ws-brushtools { flex-wrap:nowrap; }
  #imageStudio.is-canvas .canvas-selection-tools [data-canvas-resize] { display:none; }
  #imageStudio.is-canvas > .studio-progress-overlay { top:calc(var(--editor-chrome-height) + 8px); }
  #imageStudio.is-canvas:has(.canvas-selection-tools:not([hidden])) > .studio-progress-overlay { top:calc(var(--editor-chrome-height) + 8px); }
}
@media(max-width:339px) {
  #imageStudio.is-canvas:not(.canvas-phone-selected) .studio-composer .studio-choices > [data-menu=count] { display:none; }
}

#imageStudio.is-canvas .canvas-strength { display:none; }
@media(max-width:599px) {
  #imageStudio.is-canvas #studioPrompt { margin-top:0; margin-bottom:0; }
}
@media(max-width:599px) {
  #imageStudio.is-canvas:has(.bx-stage) .canvas-project-bar { display:flex; }
}
@media(max-width:380px) {
  #imageStudio.is-canvas .canvas-image-tools .ws-brushbar { flex-wrap:wrap; max-width:calc(100vw - 18px); }
}