/* Prompt workspace: shared site typography, colors, spacing and controls. */
#ai-image-tools-page { --prompt-toolbar-top:0px; --prompt-toolbar-height:64px; }
#ai-image-tools-page .prompt-formula { margin-top:var(--space-6); padding:var(--space-4); background:var(--surface-subtle); border-radius:var(--radius); }
.prompt-formula p + p { margin-top:var(--space-2); }
.prompt-formula-label,.prompt-caption { color:var(--text-muted); font-size:var(--font-small); line-height:1.6; }
.prompt-notebook-toolbar { display:flex; align-items:center; gap:var(--space-4); position:sticky; top:var(--prompt-toolbar-top); z-index:12; min-width:0; margin:var(--space-6) 0; padding:var(--space-3) var(--space-4); border-radius:var(--radius); background:var(--surface-subtle); }
#prompt-record-tabs { flex:1; min-width:0; overflow-x:auto; margin:0; padding:var(--space-1); gap:var(--space-2); scrollbar-width:thin; }
#prompt-record-tabs [role=tab] { flex:none; min-height:32px; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:var(--space-1) var(--space-8) var(--space-1) var(--space-3); font-size:var(--font-body); border-color:var(--divider); }
#prompt-record-tabs [role=tab][aria-selected=true] { border-color:var(--green); }
.prompt-record-actions { display:flex; align-items:center; gap:var(--space-2); flex-shrink:0; }
#ai-image-tools-page .context-link { margin-top:0; flex-shrink:0; gap:var(--space-2); }
#ai-image-tools-page #prompt-new { background:var(--surface); border-color:var(--border); }
#ai-image-tools-page .prompt-clear-button { color:var(--text-secondary); background:transparent; border-color:transparent; }
#ai-image-tools-page .prompt-clear-button:hover { background:var(--surface); border-color:var(--border); }
#ai-image-tools-page .prompt-clear-button:disabled { color:var(--text-muted); background:transparent; border-color:transparent; }
.prompt-record-actions svg { width:14px; height:14px; flex:none; }
.prompt-notebook-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:start; gap:var(--space-8); }
.prompt-editor-card,.prompt-result-card { min-width:0; }
.prompt-editor-card { padding:var(--space-2) 0; }
.prompt-editor-field + .prompt-editor-field { margin-top:var(--space-6); }
.prompt-field-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-2); min-height:24px; }
.prompt-field-heading label { display:flex; align-items:baseline; gap:var(--space-2); font-weight:600; }
.prompt-field-heading label span { color:var(--text-muted); font-size:var(--font-small); font-weight:400; font-variant-numeric:tabular-nums; }
.prompt-editor-field textarea { display:block; width:100%; min-height:80px; max-height:240px; height:auto; field-sizing:content; resize:vertical; padding:var(--space-3); border:1px solid transparent; border-radius:var(--radius); background:var(--surface-subtle); color:var(--ink); font-size:var(--font-body); line-height:1.75; }
.prompt-editor-field textarea:hover { border-color:var(--border); }
.prompt-editor-field textarea:focus { outline:none; background:var(--surface); border-color:var(--text-muted); }
.prompt-editor-field textarea::placeholder { color:var(--text-muted); opacity:.6; }
.prompt-help { padding:var(--space-1) var(--space-2); border:0; border-radius:var(--radius-pill); background:var(--surface-subtle); color:var(--text-muted); font-size:var(--font-small); line-height:1.6; white-space:nowrap; }
.prompt-result-card { position:sticky; top:calc(var(--prompt-toolbar-top) + var(--prompt-toolbar-height) + var(--space-4)); border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.prompt-card-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.prompt-result-card .prompt-card-heading { position:sticky; top:calc(var(--prompt-toolbar-top) + var(--prompt-toolbar-height) + var(--space-4)); z-index:5; margin:0; padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--divider); border-radius:var(--radius) var(--radius) 0 0; background:var(--surface); }
.prompt-card-heading h3 { margin:0; font-size:var(--font-card); }
#prompt-constraints { min-width:0; margin:0; padding:var(--space-4); border:0; border-bottom:1px solid var(--divider); }
#prompt-constraints legend { float:left; width:100%; padding:0; margin:0 0 var(--space-3); font-size:var(--font-body); font-weight:600; }
.prompt-constraint-row { clear:both; display:grid; grid-template-columns:44px minmax(0,1fr); gap:var(--space-2); align-items:start; }
.prompt-constraint-choice { display:grid; place-items:center; width:44px; min-height:44px; cursor:pointer; }
.prompt-constraint-choice input { width:16px; height:16px; margin:0; accent-color:var(--green); cursor:pointer; }
.prompt-constraint-row .prompt-constraint-text { display:block; width:100%; min-width:0; min-height:64px; max-height:200px; field-sizing:content; resize:vertical; margin:0; padding:var(--space-2); border:1px solid transparent; border-radius:var(--radius); background:var(--surface-subtle); color:var(--text-secondary); font:inherit; line-height:1.75; }
.prompt-constraint-text:hover { border-color:var(--border); }
.prompt-constraint-text:focus { outline:none; border-color:var(--text-muted); background:var(--surface); }
.prompt-constraint-text::placeholder { color:var(--text-muted); opacity:.6; }
#prompt-copy,#prompt-translate { background:var(--surface-active); border-radius:var(--radius); }
#prompt-copy:hover,#prompt-translate:hover { color:var(--green-hover); }
#prompt-copy:disabled,#prompt-translate:disabled { background:var(--surface-subtle); color:var(--text-muted); }
#prompt-output { display:block; width:100%; height:clamp(320px,calc(100dvh - var(--prompt-toolbar-height) - 224px),640px); min-height:240px; margin:0; padding:var(--space-4); border:0; border-radius:0 0 var(--radius) var(--radius); background:var(--surface); resize:vertical; color:var(--text-secondary); font:inherit; line-height:1.75; overflow-wrap:anywhere; }
#prompt-output:focus { outline:none; }
.prompt-result-card:has(#prompt-output:focus) { border-color:var(--text-muted); }
.prompt-output-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2); margin:0; padding:var(--space-3) var(--space-4); background:var(--surface-subtle); }
#prompt-save-status[data-error=true] { margin-top:var(--space-4); color:var(--status-error); }
.prompt-dialog-actions { display:flex; justify-content:flex-end; gap:var(--space-3); margin-top:var(--space-6); }
.prompt-record-item { position:relative; display:flex; flex:none; min-width:0; }
.prompt-tab-rename { flex:none; width:176px; min-width:0; height:32px; padding:var(--space-1) var(--space-3); border:1px solid transparent; border-bottom-color:var(--text-muted); border-radius:0; background:var(--surface-subtle); color:var(--ink); }
.prompt-tab-rename:focus { outline:none; }
#prompt-record-tabs .prompt-record-remove { position:absolute; right:var(--space-1); top:50%; transform:translateY(-50%); display:grid; place-items:center; width:24px; height:24px; min-width:24px; min-height:24px; padding:0; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--text-muted); opacity:0; pointer-events:none; }
#prompt-record-tabs .prompt-record-item:has([aria-selected=true]) .prompt-record-remove { color:var(--surface); }
#prompt-record-tabs .prompt-record-remove:is(:hover,:focus-visible),
#prompt-record-tabs .prompt-record-item:has([aria-selected=true]) .prompt-record-remove:is(:hover,:focus-visible) { background:var(--surface-active); color:var(--green); }
#prompt-record-tabs .prompt-record-remove svg { pointer-events:none; }
#prompt-record-tabs .prompt-record-item:is(:hover,:focus-within) .prompt-record-remove { opacity:1; pointer-events:auto; }
#prompt-record-tabs .prompt-record-item:has(.prompt-tab-rename) .prompt-record-remove { display:none; }
@media(hover:none) { #prompt-record-tabs .prompt-record-remove { opacity:1; pointer-events:auto; } }
main > #ai-image-tools-page .prompt-notebook-toolbar::before,
main > #ai-image-tools-page .prompt-notebook-toolbar::after { content:""; position:absolute; pointer-events:none; }
main > #ai-image-tools-page .prompt-notebook-toolbar::before { inset:calc(0px - var(--space-4)); background:var(--surface); z-index:-2; }
main > #ai-image-tools-page .prompt-notebook-toolbar::after { inset:0; background:var(--surface-subtle); border-radius:inherit; z-index:-1; }
@media(max-width:1100px) { .prompt-notebook-grid { grid-template-columns:minmax(0,1fr); gap:var(--space-6); } .prompt-result-card { position:static; } }
@media(max-width:760px) {
 #ai-image-tools-page { --prompt-toolbar-top:var(--mobile-header-height); }
 .prompt-notebook-toolbar { flex-wrap:wrap; gap:var(--space-2); padding:var(--space-3); }
 #prompt-record-tabs { flex-basis:100%; }
 #prompt-record-tabs [role=tab] { max-width:176px; }
 .prompt-record-actions { margin-left:auto; }
 .prompt-result-card .prompt-card-heading { gap:var(--space-2); }
}

/* Material helper pilot: fixed header/footer, independently scrolling references. */
.prompt-reference-dialog { width:min(var(--content-max),calc(100vw - 32px)); max-width:calc(100vw - 32px); max-height:calc(100dvh - 48px); padding:0; overflow:hidden; }
.prompt-reference-dialog[open] { display:flex; flex-direction:column; }
.material-helper-header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); padding:var(--space-6); border-bottom:1px solid var(--divider); flex:none; }
.material-helper-header h2 { font-size:var(--font-section); margin:0; }
.material-helper-close { flex:none; }
.material-helper-body { overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:var(--space-6); min-height:0; }
.material-rules { padding:var(--space-4); border-radius:var(--radius); background:var(--surface-subtle); }
.material-rules>summary { font-size:var(--font-card); font-weight:600; cursor:pointer; }
.material-rules>p { margin-top:var(--space-2); }
.material-rules-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); margin-top:var(--space-4); }
.material-rules-grid h3 { font-size:var(--font-body); }
.material-rules-grid ul { margin:0; padding-left:var(--space-4); color:var(--text-secondary); line-height:1.75; }
.material-rules-copy { margin-top:var(--space-4); }
.material-rules-copy summary { color:var(--green); cursor:pointer; }
.material-rule-text { white-space:pre-wrap; margin-top:var(--space-3); }
.prompt-reference-dialog .context-link { margin-top:0; gap:var(--space-2); }
.prompt-reference-dialog .material-copy-rules { margin-top:var(--space-3); }
.material-categories { position:sticky; top:calc(0px - var(--space-6)); z-index:4; flex-wrap:wrap; margin:var(--space-6) 0; padding:var(--space-3) 0; background:var(--surface); }
.material-categories button { min-height:32px; padding:var(--space-1) var(--space-4); }
.material-categories button:disabled { color:var(--text-muted); background:var(--surface-subtle); border-color:transparent; }
.material-categories .material-category-active { color:var(--surface); border-color:var(--green); background:var(--green); }
.material-category-heading { display:flex; align-items:baseline; gap:var(--space-3); margin-bottom:var(--space-4); }
.material-category-heading h3 { margin:0; }
.material-helper-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4); }
.material-reference-card { min-width:0; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.material-reference-image { aspect-ratio:290/190; background-image:url('assets/prompt-helper/material-reference.png'); background-size:494.827586% auto; background-repeat:no-repeat; }
.material-reference-content { display:flex; flex-direction:column; padding:var(--space-4); flex:1; }
.material-reference-content h3 { margin-bottom:var(--space-1); }
.material-reference-description { margin-top:var(--space-2); font-size:var(--font-small); color:var(--text-muted); }
.material-reference-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-top:auto; padding-top:var(--space-4); }
.material-reference-actions .context-link { padding:0 var(--space-3); }
.material-card-copy { background:var(--surface-subtle); }
.material-helper-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); min-height:64px; padding:var(--space-4) var(--space-6); border-top:1px solid var(--divider); flex:none; }
.material-helper-status { display:flex; align-items:center; min-height:32px; color:var(--text-secondary); }
.material-insert-options { display:flex; gap:var(--space-2); }
.material-insert-options [data-insert=cancel] { background:var(--surface-subtle); color:var(--text-secondary); }
#ai-image-tools-page .prompt-help:not(:disabled) { color:var(--green); background:var(--surface-active); }
#ai-image-tools-page .prompt-help:not(:disabled):hover { color:var(--green-hover); background:color-mix(in srgb,var(--surface-active) 94%,var(--green)); }
#ai-image-tools-page .prompt-help:focus { outline:none; }
#ai-image-tools-page .prompt-help:focus-visible { outline:1px solid var(--text-muted); outline-offset:2px; }
#ai-image-tools-page .prompt-help.pointer-focus:focus-visible { outline:none; }
@media(max-width:1100px) { .material-helper-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
 .prompt-reference-dialog { max-height:calc(100dvh - 32px); }
 .material-helper-header,.material-helper-body { padding:var(--space-4); }
 .material-helper-footer { padding:var(--space-3) var(--space-4); }
 .material-rules-grid { grid-template-columns:1fr; gap:var(--space-4); }
 .material-helper-grid { gap:var(--space-3); }
 .material-reference-content { padding:var(--space-3); }
 .material-reference-actions { gap:var(--space-1); }
 .material-reference-actions .context-link { padding:0 var(--space-2); }
 .material-categories { top:calc(0px - var(--space-4)); gap:var(--space-2); }
 .material-categories button { flex:none; min-width:0; padding:var(--space-1) var(--space-3); }
}

.prompt-result-actions { display:flex; align-items:center; gap:var(--space-2); flex:none; }
#prompt-translate-status { padding:var(--space-3) var(--space-4); color:var(--status-error); }
@media(max-width:760px) { .prompt-result-card .prompt-card-heading { flex-wrap:wrap; } .prompt-result-actions { margin-left:auto; } }

#prompt-translate[aria-busy=true] { background:var(--surface-active); color:var(--green); }
.prompt-translation-spinner { animation:prompt-translation-spin .8s linear infinite; transform-origin:center; }
@keyframes prompt-translation-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .prompt-translation-spinner { animation:none; } }

.material-selected-summary { flex-basis:100%; max-height:80px; overflow-y:auto; color:var(--text-secondary); font-size:var(--font-small); overflow-wrap:anywhere; }
.prompt-reference-dialog .material-card-fill:disabled { color:var(--green); background:var(--surface-active); border-color:transparent; cursor:default; }
.material-reference-card.is-inserted { border-color:var(--border); }

.prompt-reference-dialog[data-field=composition] .material-category-heading { margin-top:var(--space-6); }

@media(max-width:480px) { .material-reference-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-2); } .prompt-reference-dialog .material-reference-actions .context-link { width:100%; } }

.negative-helper-note { margin-bottom:var(--space-6); color:var(--text-secondary); }
.negative-helper-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); }
.negative-helper-grid .material-reference-content { padding:var(--space-4); }
.negative-helper-grid .material-reference-content h3 { margin-bottom:var(--space-4); }
.negative-helper-grid .material-reference-description { margin-top:0; color:var(--text-secondary); font-size:var(--font-body); line-height:1.75; }
.negative-helper-grid .material-reference-actions { padding-top:var(--space-6); }
@media(max-width:1100px) { .negative-helper-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .negative-helper-grid { grid-template-columns:minmax(0,1fr); gap:var(--space-4); } }

/* Global notebook dialog, with independent page and workspace scrolling. */
#prompt-tool-launcher { position:fixed; right:var(--space-4); z-index:24; display:flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:var(--control-height); width:112px; padding:var(--space-2); border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-active); color:var(--green); font-size:var(--font-small); }
#prompt-tool-launcher svg { flex:none; }
#prompt-tool-launcher:hover { background:var(--surface); border-color:var(--green); }
#prompt-tool-dialog { width:calc(var(--content-max) + var(--space-12)); max-width:calc(100vw - 32px); height:calc(100dvh - 48px); max-height:calc(100dvh - 48px); padding:0; overflow:hidden; }
#prompt-tool-dialog[open] { display:flex; flex-direction:column; }
.prompt-tool-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4) var(--space-6); flex:none; border-bottom:1px solid var(--divider); }
.prompt-tool-header h2 { margin:0; font-size:var(--font-section); }
.prompt-tool-scroll { --prompt-scroll-padding:var(--space-6); flex:1; overflow:auto; overscroll-behavior:contain; min-height:0; padding:var(--prompt-scroll-padding); scrollbar-gutter:stable; }
#prompt-tool-dialog #ai-image-tools-page { --prompt-toolbar-top:0px; }
#prompt-tool-dialog .page-header,#prompt-tool-dialog .toc { display:none; }
#prompt-tool-dialog #prompt-notebook { margin-bottom:0; }
#prompt-tool-dialog .prompt-notebook-toolbar { border-radius:var(--radius); }
/* Cover the scroll padding and rounded corners without changing toolbar spacing. */
#prompt-tool-dialog .prompt-notebook-toolbar::before,
#prompt-tool-dialog .prompt-notebook-toolbar::after { content:""; position:absolute; pointer-events:none; }
#prompt-tool-dialog .prompt-notebook-toolbar::before { inset:calc(0px - var(--prompt-scroll-padding)) calc(0px - var(--prompt-scroll-padding)) calc(0px - var(--space-4)); z-index:-2; background:var(--surface); }
#prompt-tool-dialog .prompt-notebook-toolbar::after { inset:0; z-index:-1; border-radius:inherit; background:var(--surface-subtle); }
.prompt-tool-toast { position:absolute; bottom:var(--space-4); left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); padding:var(--space-2) var(--space-4); background:var(--ink); color:var(--surface); border-radius:var(--radius); pointer-events:none; z-index:15; }
body.prompt-tool-open { overflow:hidden; }
#prompt-polish { background:var(--surface-active); border-radius:var(--radius); }
#prompt-polish:hover { color:var(--green-hover); }
#prompt-polish:disabled { background:var(--surface-subtle); color:var(--text-muted); }
.prompt-polish-undo { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-2) var(--space-4); border-bottom:1px solid var(--divider); color:var(--text-muted); font-size:var(--font-small); }
.prompt-polish-undo button { min-height:32px; padding:var(--space-1) var(--space-2); border:0; background:transparent; color:var(--green); }
#prompt-polish-dialog { width:960px; max-height:calc(100dvh - 48px); padding:0; overflow:hidden; }
#prompt-polish-dialog[open] { display:flex; flex-direction:column; }
.polish-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4) var(--space-6); border-bottom:1px solid var(--divider); flex:none; }
.polish-heading h2 { margin:0; font-size:var(--font-section); }
.polish-body { padding:var(--space-6); overflow:auto; min-height:0; }
.polish-comparison { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-6); margin-top:var(--space-6); }
.polish-comparison>div { min-width:0; }
.polish-comparison h3,.polish-comparison label { display:block; margin:0 0 var(--space-3); font-size:var(--font-card); font-weight:600; }
#polish-original,#polish-result { padding:var(--space-4); margin:0; min-height:320px; max-height:50dvh; overflow:auto; font:inherit; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid var(--border); border-radius:var(--radius); }
#polish-original { background:var(--surface-subtle); color:var(--text-secondary); }
#polish-result { display:block; width:100%; height:50dvh; resize:vertical; background:var(--surface); color:var(--ink); }
#polish-result:focus { outline:none; border-color:var(--text-muted); }
.polish-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--space-3); padding:var(--space-4) var(--space-6); border-top:1px solid var(--divider); flex:none; }
.polish-actions .context-link { margin-top:0; }
#polish-error { margin-top:var(--space-4); color:var(--status-error); }
#polish-setup { margin-top:var(--space-4); }
#polish-setup pre { padding:var(--space-4); border-radius:var(--radius); background:var(--surface-subtle); overflow:auto; font-size:var(--font-body); }
@media(max-width:760px) { .polish-comparison { grid-template-columns:minmax(0,1fr); } .polish-heading,.polish-body,.polish-actions { padding:var(--space-4); } #polish-original,#polish-result { min-height:200px; } }
@media(max-width:1100px) { #prompt-tool-launcher { bottom:var(--space-6); width:auto; padding:var(--space-2) var(--space-4); } }
@media(max-width:760px) {
 #prompt-tool-dialog { height:calc(100dvh - 32px); max-height:calc(100dvh - 32px); }
 .prompt-tool-header { padding:var(--space-4); }
 .prompt-tool-scroll { --prompt-scroll-padding:var(--space-4); }
 #prompt-tool-launcher { right:var(--space-4); bottom:var(--space-4); }
}