/* v14: edit the thing you touch, with visible limits and direct handles. */
.fixed-base-editor [hidden]{display:none!important}
.fixed-base-editor #canvasSurface{isolation:isolate}
.fixed-base-editor #designCanvas [data-fixed-item],
.fixed-base-editor #designCanvas [data-element-id]{touch-action:none}
.fixed-base-editor #designCanvas [data-element-id]{cursor:grab}
.fixed-base-editor #designCanvas [data-element-id]:active{cursor:grabbing}
.fixed-base-editor #designCanvas [data-element-id][aria-label*="编辑文字"]{cursor:text}
.fixed-base-editor #designCanvas [data-kind="text"]{cursor:text}

/* A compact, contextual tool tray stays beside the selected sticker. */
.context-tools{
 position:absolute;z-index:14;display:flex;align-items:center;flex-wrap:wrap;gap:5px;
 width:286px;max-width:calc(100% - 16px);padding:7px;
 border:1px solid #c6d2bb;border-radius:15px;background:#fffef9;
 box-shadow:0 5px 20px #354d3020;color:var(--ink);touch-action:manipulation;
}
.context-tools .quick-actions{display:flex;align-items:center;gap:5px;width:100%;min-width:0}
.context-tools #quickLabel{flex:1 1 49px;min-width:0;font-size:11px;line-height:1.4;font-weight:650;overflow-wrap:anywhere;padding-left:5px}
.context-tools .quick-actions>button{flex:0 0 auto;min-height:44px;min-width:44px;padding:7px 8px;border:1px solid #dce2d3;border-radius:10px;background:#f7f8ef;font-size:11px;line-height:1.4;white-space:nowrap}
.context-tools #quickReplace{color:#3d6346;background:#eaf0e2;border-color:#d3dec8}
.context-tools #quickRemove{color:#a16451;background:#fff9f2;border-color:#eaded1}
.context-tools #quickDone{background:#466d53;border-color:#466d53;color:#fffdf5}
.context-tools button:disabled{opacity:.45}
.context-tools button:hover:not(:disabled){filter:brightness(.97)}
#quickSuggestions{display:flex;flex:1 0 100%;min-width:0;gap:5px;padding-top:5px;border-top:1px solid #e6eadf}
#quickSuggestions:empty{display:none}
#quickSuggestions button{display:flex;align-items:center;justify-content:center;gap:5px;flex:1 1 0;min-width:0;min-height:44px;padding:4px;border:1px solid #e3e7d9;border-radius:9px;background:#fafbf3;font-size:10px;line-height:1.3;overflow:hidden}
#quickSuggestions button:hover{background:#edf2e3;border-color:#a5bb96}
#quickSuggestions button[aria-pressed=true]{background:#e7efdb;border-color:#6f8e5d}
#quickSuggestions svg{display:block;flex:none;width:32px;height:32px;max-width:45%;padding:3px;background:#579bd7;border-radius:7px;pointer-events:none}
#quickSuggestions span{min-width:0;overflow-wrap:anywhere;pointer-events:none}

/* The editor is positioned against the text on desktop and above the keyboard
   on mobile. JavaScript supplies viewport-aware coordinates in both cases. */
.canvas-text-editor{
 position:fixed;z-index:70;width:320px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);
 overflow:auto;overscroll-behavior:contain;padding:12px;border:1px solid #bfcfb2;
 border-radius:17px;background:var(--paper);box-shadow:0 8px 35px #253f3030;
 color:var(--ink);font-size:12px;touch-action:manipulation;
}
.canvas-text-editor header,.canvas-text-editor>.inline-text-header,.canvas-text-editor>.inline-text-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
#inlineTextTitle{font-size:13px;line-height:1.5;margin:0;font-weight:700}
#inlineTextDone{min-height:44px;min-width:54px;border-radius:10px;padding:7px 12px;background:var(--green);color:#fffdf7;font-size:12px}
.canvas-text-editor label{display:block;font-size:11px;font-weight:600;line-height:1.5;margin:5px 0 4px}
.canvas-text-editor input#inlineTextInput{font-size:18px;min-height:48px;line-height:1.4;padding:10px 11px;background:#fffefb}
.canvas-text-editor input#inlineTextInput[aria-invalid=true]{border-color:#bd735f;background:#fff8f3}
.canvas-text-editor select#inlineTextFont{font-size:14px;min-height:44px;margin-top:4px;padding:9px 11px;background:#f5f7ed}
#inlineTextBudget{margin:8px 0 0;color:#6c7c61;font-size:11px;line-height:1.65;overflow-wrap:anywhere}
#inlineTextBudget small{font-size:10px;display:block;color:#7d8775}
#inlineTextError{margin:7px 0 0;font-size:11px;line-height:1.65;color:#a4523c;overflow-wrap:anywhere}
#inlineTextError:empty{display:none}
#inlineTextRemove{margin-top:9px;min-height:44px;width:100%;border:1px solid #e6d9cd;border-radius:10px;font-size:11px;background:#fff9f2;color:#9e6450;padding:9px 11px}

/* Resize and rotate have a small visible grip inside the larger touch target. */
#transformLayer{pointer-events:none}
#transformLayer [data-transform-outline]{fill:none;stroke-width:1.5;stroke-dasharray:5 3;vector-effect:non-scaling-stroke;pointer-events:none}
#transformLayer [data-transform-handle]{pointer-events:all;touch-action:none;user-select:none}
#transformLayer [data-transform-handle="nw"],#transformLayer [data-transform-handle="se"]{cursor:nwse-resize}
#transformLayer [data-transform-handle="ne"],#transformLayer [data-transform-handle="sw"]{cursor:nesw-resize}
#transformLayer [data-transform-handle="rotate"]{cursor:grab}
#transformLayer [data-transform-handle="move"]{cursor:move}
#transformLayer [data-transform-handle="rotate"]:active{cursor:grabbing}
#transformLayer .handle-hit{fill:transparent;stroke:none;pointer-events:all}
#transformLayer .handle-dot,#transformLayer [data-transform-handle] circle:last-of-type{fill:#fffef7;stroke-width:1.7;vector-effect:non-scaling-stroke;pointer-events:none}
#transformLayer [data-transform-handle]:hover .handle-dot,#transformLayer [data-transform-handle]:hover circle:last-of-type{fill:#f8e89c}
#transformLayer .handle-glyph,#transformLayer [data-transform-handle] text{pointer-events:none;user-select:none;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-weight:700}
#transformLayer [data-transform-handle]:focus-visible{outline:none}
#transformLayer [data-transform-handle]:focus-visible .handle-dot{stroke:#9a5b38;stroke-width:3}
#transformLayer .rotation-stem{stroke:#466d53;stroke-width:1.2;vector-effect:non-scaling-stroke;pointer-events:none}

/* A short legend explains what can move without making the canvas a settings UI. */
#limitLegend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 13px;margin:8px 0 0;padding:0 4px;font-size:10px;line-height:1.65;color:#78856e}
#limitLegend>label,#limitLegend .limit-toggle{display:inline-flex;align-items:center;gap:6px;min-height:36px;cursor:pointer;color:#4c6845;font-weight:600}
#limitLegend input{flex:none;width:15px;height:15px;margin:0;accent-color:#56764b}
#limitLegend .limit-key,#limitLegend .legend-key{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
#limitLegend i,#limitLegend .legend-line{display:inline-block;vertical-align:middle;flex:none;width:17px;height:0;border-top:2px dashed var(--limit-color,#628b57)}
#limitLegend .limit-outer,#limitLegend .outer{--limit-color:#bc8957}
#limitLegend .limit-protected,#limitLegend .protected,#limitLegend .protection{--limit-color:#9580b1}
#limitLegend .limit-slot,#limitLegend .slot,#limitLegend .movement{--limit-color:#628b57}
.fixed-base-editor.preview-collapsed #limitLegend{display:none!important}

/* Text shortcuts restore removed labels but never become a second editor. */
#textLaunchers{display:grid;gap:8px;margin-top:13px}
#textLaunchers>button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;width:100%;padding:11px 13px;border:1px solid #dce2d3;border-radius:12px;text-align:left;background:#fffef9;font-size:13px;line-height:1.6}
#textLaunchers>button:hover{background:#f0f5e9;border-color:#9eb78e}
#textLaunchers>button[aria-pressed=true],#textLaunchers>button.active{background:#edf3e3;border-color:#79966a}
#textLaunchers strong{font-size:12px;line-height:1.6;font-weight:650;overflow-wrap:anywhere;min-width:0}
#textLaunchers span{min-width:0;overflow-wrap:anywhere}
#textLaunchers small{font-size:10px;line-height:1.5;color:#7a8771;flex:none}
#textLaunchers .text-empty{color:#87917d;font-size:12px}
.fixed-base-editor #panel-text .intro{margin-bottom:10px}

@media(max-width:760px){
 .context-tools{border-radius:13px;padding:6px;width:280px;max-width:calc(100% - 12px);gap:4px;box-shadow:0 3px 14px #354d3024}
 .context-tools #quickLabel{font-size:10px;padding-left:3px;flex-basis:42px}
 .context-tools .quick-actions>button{min-height:44px;padding:7px;font-size:11px;border-radius:9px}
 #quickSuggestions{gap:4px;padding-top:4px}
 #quickSuggestions button{min-height:44px;font-size:10px}
 #quickSuggestions svg{width:30px;height:30px}
 .canvas-text-editor{padding:11px;border-radius:16px;box-shadow:0 5px 24px #253f3029}
 .canvas-text-editor header,.canvas-text-editor>.inline-text-header,.canvas-text-editor>.inline-text-heading{margin-bottom:5px}
 #inlineTextTitle{font-size:13px}
 .canvas-text-editor input#inlineTextInput{min-height:46px;font-size:18px;padding:8px 10px}
 .canvas-text-editor select#inlineTextFont{font-size:16px;margin-top:6px;padding:8px 10px}
 #inlineTextBudget,#inlineTextError{font-size:10px;line-height:1.5;margin-top:6px}
 #inlineTextRemove{margin-top:7px;min-height:44px}
 #limitLegend{gap:0 9px;margin-top:3px;font-size:9px;line-height:1.5}
 #limitLegend>label,#limitLegend .limit-toggle{min-height:40px;font-size:10px}
 #limitLegend i,#limitLegend .legend-line{width:13px}
 #textLaunchers{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}
 #textLaunchers>button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-height:70px;padding:10px}
 #textLaunchers strong{font-size:12px}#textLaunchers small{font-size:10px}
 .fixed-base-editor.motif-picker-open #limitLegend{display:none}
}
@media(max-width:360px){
 .context-tools{width:264px;padding:5px;gap:3px}
 .context-tools #quickLabel{font-size:9px;flex-basis:32px;padding-left:2px}
 .context-tools .quick-actions>button{font-size:10px;padding:6px;min-width:44px}
 #quickSuggestions{gap:3px;padding-top:3px}
 #quickSuggestions button{font-size:9px;gap:3px;padding:3px}
 #quickSuggestions svg{width:27px;height:29px}
 #limitLegend{gap:0 6px;font-size:8px}
 #limitLegend>label,#limitLegend .limit-toggle{font-size:9px}
 #textLaunchers>button{padding:8px}
 .canvas-text-editor{padding:9px}
}
@media(prefers-reduced-motion:reduce){.context-tools,.canvas-text-editor{scroll-behavior:auto}}

/* Names used by the v14 canvas legend; match the corresponding SVG guides. */
#limitLegend .limit-outer-key,#limitLegend .limit-core-key,#limitLegend .limit-slot-key{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
#limitLegend .limit-outer-key::before,#limitLegend .limit-core-key::before,#limitLegend .limit-slot-key::before{content:"";display:inline-block;width:16px;border-top:2px dashed #bd7c4a}
#limitLegend .limit-core-key::before{border-color:#9274a9}
#limitLegend .limit-slot-key::before{border-color:#528f99}
@media(max-width:360px){.context-tools .quick-actions{gap:3px}#limitLegend .limit-outer-key::before,#limitLegend .limit-core-key::before,#limitLegend .limit-slot-key::before{width:11px}}

/* Long stickers keep every drag handle clear with a single compact action row. */
.context-tools.compact-context{display:flex;flex-wrap:nowrap;gap:5px;padding:5px;align-items:center}
.context-tools.compact-context .quick-actions{width:auto;flex:none;gap:3px}
.context-tools.compact-context #quickLabel{display:none}
.context-tools.compact-context #quickSuggestions{display:flex;margin:0;padding:0;gap:3px;border:0;flex:1;min-width:0}
.context-tools.compact-context #quickSuggestions button{width:44px;min-width:44px;height:44px;min-height:44px;padding:3px}
.context-tools.compact-context #quickSuggestions button svg{width:34px;height:34px}
.context-tools.compact-context #quickSuggestions button span,.context-tools.compact-context #quickSuggestions button:nth-child(n+3){display:none}