/* Shared workspace chrome. Photo geometry, drawing planes and saved panel widths
   remain controlled by their own modules. Selection and keyboard focus differ. */
:root {
  --ui-control-height: 34px;
  --ui-control-radius: 9px;
  --ui-icon-size: 18px;
  --ui-section-title-size: calc(13px + var(--app-font-increase, 1pt));
  --ui-card-title-size: calc(12px + var(--app-font-increase, 1pt));
  --ui-chrome-shadow: 0 1px 3px rgb(0 0 0 / 5%);
}

.prompt-section-heading,
#generationReferences > .section-minihead,
.history-header,
#createMoodboardDock .moodboard-header {
  align-items: center;
  gap: 12px;
}
.prompt-draft-label,
#referenceSectionHeading strong,
.history-copy h2 {
  font-size: var(--ui-section-title-size);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.015em;
}
body #generationReferences > .section-minihead > #referenceSectionHeading { display:flex; flex:1 1 auto; min-width:0; }
body #generationReferences #referenceSectionHeading > #referenceCount { margin-left:auto; }
.prompt-draft-label small,
#promptFieldLabel,
#referenceCount,
.history-copy > span {
  color: var(--muted);
  font-weight: 400;
  line-height: 1.4;
}

/* Aligned hit areas, with smaller icons inside the compact auxiliary controls. */
body :is(#railSettingsButton, #resetPromptButton, #resetGenerationSettingsButton,
  .gallery-density-button, .library-action, .library-search-clear) {
  min-height: var(--ui-control-height);
  border-radius: var(--ui-control-radius);
  box-shadow: none;
}
body :is(#railSettingsButton, #resetPromptButton, #resetGenerationSettingsButton,
  .gallery-density-button) {
  flex-basis: var(--ui-control-height);
  width: var(--ui-control-height);
  height: var(--ui-control-height);
  padding: 7px;
  box-sizing: border-box;
}
body :is(#railSettingsButton, #resetPromptButton, #resetGenerationSettingsButton,
  .gallery-density-button, .library-action) svg {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  flex-shrink: 0;
  stroke-width: 1.6;
}
.topbar-create {
  border-color: var(--line);
  border-radius: 13px;
  box-shadow: var(--ui-chrome-shadow);
}
.topbar-launch-card .task-toolbar #generateButton {
  min-width:0; width:100%; padding-inline:8px; margin-inline-start:0;
}
#generateButton .button-label::after {
  content:none;
}
.topbar-launch-card .task-toolbar.launch-actions > .topbar-create {
  display:grid; grid-template-columns:72px 62px minmax(0,1fr) 28px;
  min-width:0; width:100%; max-width:100%; box-sizing:border-box;
  gap:6px; padding:5px 6px; height:auto; min-height:44px;
}
.topbar-launch-card .topbar-create .topbar-output-controls {
  min-width:0; padding-inline-end:0; border-inline-end:1px solid var(--line); height:26px; align-items:center;
}
.topbar-launch-card .topbar-create .topbar-output-controls #promptRatioControl { width:100%; min-width:0; }
.topbar-launch-card .topbar-create .ratio-picker-trigger { width:100%; min-width:0; }
.topbar-launch-card .task-toolbar #generateButton .button-label {
  min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.3;
}
.topbar-launch-card .task-toolbar .topbar-quantity {
  position:relative; width:62px; min-width:0; padding-inline:2px 4px; border:0; height:26px; background:transparent;
}
.topbar-launch-card .task-toolbar .topbar-quantity .quantity-icon { width:14px; flex-basis:14px; }
.topbar-launch-card .task-toolbar .topbar-quantity #topbarCount { min-width:0; width:22px; flex:1 1 0; }
.topbar-launch-card .task-toolbar .topbar-quantity::after {
  content:""; position:absolute; inset-inline-end:0; top:0; bottom:0; width:1px;
  background:var(--line); pointer-events:none;
}
.topbar-launch-card .task-toolbar .quantity-steps button {
  width:14px; min-width:0; padding:0; box-sizing:border-box;
  border:0; background:transparent; box-shadow:none; filter:none; transform:none;
}
.topbar-launch-card .task-toolbar #topbarCount { background:transparent; box-shadow:none; }
@media(hover:hover) {
  .topbar-launch-card .topbar-create .ratio-picker-trigger:not(:disabled):hover,
  .topbar-launch-card .task-toolbar .topbar-quantity:not(:has(input:disabled)):hover {
    background:var(--accent-faint); color:var(--accent);
  }
  .topbar-launch-card .task-toolbar .topbar-quantity:hover :is(.quantity-icon,.quantity-steps button) { color:var(--accent); }
  .topbar-launch-card .task-toolbar .quantity-steps button:hover { background:transparent; box-shadow:none; }
}
.topbar-launch-card .task-toolbar .topbar-quantity:focus-within { box-shadow:none; }
.topbar-launch-card .task-toolbar .topbar-quantity:has(:focus-visible) {
  outline:1px solid var(--accent); outline-offset:2px;
}
.topbar-launch-card .topbar-create .task-stop {
  --stop-tint:#c9342d;
  position:relative; margin-inline-start:0; width:28px; min-width:0; height:28px; padding:5px; border:1px solid var(--line);
  border-radius:9px; background:var(--surface-subtle); color:var(--stop-tint);
  box-shadow:none; cursor:pointer;
  transition:background-color 120ms ease, color 120ms ease;
}
:root[data-theme="dark"] .topbar-launch-card .topbar-create .task-stop { --stop-tint:#ff6961; }
@media(hover:hover) {
  .topbar-launch-card .topbar-create .task-stop:hover:not(:disabled) {
    background:color-mix(in srgb,var(--stop-tint) 10%,var(--surface-subtle));
  }
}
.topbar-launch-card .topbar-create .task-stop:active:not(:disabled) {
  background:color-mix(in srgb,var(--stop-tint) 18%,var(--surface-subtle));
}
.topbar-launch-card .topbar-create .task-stop:disabled {
  opacity:.4; color:var(--muted); background:transparent; border-color:transparent; cursor:default;
}
@media(prefers-reduced-motion:reduce) { .topbar-launch-card .topbar-create .task-stop { transition:none; } }
.topbar-launch-card .topbar-create .task-stop::before {
  content:none;
}
@media(max-width:480px) {
  .topbar-launch-card .task-toolbar.launch-actions > .topbar-create { grid-template-columns:66px 62px minmax(0,1fr) 28px; gap:4px; padding-inline:5px; }
  .topbar-launch-card .task-toolbar #generateButton { min-width:0; padding-inline:6px; }
}
.topbar-create :is(.ratio-picker-trigger, .candidate-variation-toggle) {
  border-radius: var(--ui-control-radius);
  font-weight: 500;
}
.topbar-utility-actions {
  display:inline-flex; align-items:center; flex:0 0 auto; gap:4px; margin-inline-start:auto;
}
body .topbar-utility-actions :is(#themeToggleButton, #railSettingsButton) {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 32px;
  width:32px; min-width:32px; max-width:32px; height:32px; min-height:32px; max-height:32px;
  margin:0; padding:6px; box-sizing:border-box; border:1px solid transparent; border-radius:8px;
  background:transparent; color:var(--muted); box-shadow:none;
  transition:background-color 120ms ease, color 120ms ease;
}
body .topbar-utility-actions :is(#themeToggleButton, #railSettingsButton) svg {
  display:block; width:18px; height:18px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
:root[data-theme="light"] .topbar-utility-actions #themeToggleButton .theme-toggle-sun,
:root[data-theme="dark"] .topbar-utility-actions #themeToggleButton .theme-toggle-moon { display:none; }
@media(hover:hover) {
  body .topbar-utility-actions :is(#themeToggleButton, #railSettingsButton):not(:disabled):hover {
    background:var(--surface-hover); color:var(--text); border-color:transparent;
  }
}
body .topbar-utility-actions :is(#themeToggleButton, #railSettingsButton):focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}
body .topbar-utility-actions #railSettingsButton[aria-pressed="true"] { background:transparent; color:var(--accent); }
@media(prefers-reduced-motion:reduce) {
  body .topbar-utility-actions :is(#themeToggleButton, #railSettingsButton) { transition:none; }
}

/* Reference cards keep their compact grid and generous image/add click targets. */
body #generationReferences .reference-role-card.has-split-reference {
  border-radius: 13px;
  box-shadow: var(--ui-chrome-shadow);
}
body #generationReferences .reference-role-card.has-reference:not(:focus-visible) {
  outline: none;
  border-color: var(--accent-line);
}
body #generationReferences .reference-role-copy strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
body #generationReferences .reference-role-copy {
  color: var(--muted);
  line-height: 1.5;
}
body #generationReferences .reference-card-actions button {
  border-radius: 7px;
  font-weight: 500;
}
body .shot-size-picker .shot-size-option[aria-pressed="true"]:not(:focus-visible) {
  outline: none;
  border-color: var(--accent-line);
  background: var(--accent-faint);
  box-shadow: none;
}
body .shot-size-picker .shot-size-option:is([data-shot-size="auto"], [data-camera-angle="auto"])[aria-pressed="true"] {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border-color: transparent;
}
.camera-series-button { border-radius: 9px; font-weight: 500; }
.camera-series-button[aria-pressed="true"] { border-color: var(--accent-line); }

/* Grouped library controls; stable six-category order and existing semantics. */
body #createMoodboardDock .moodboard-header { align-items:center; padding:4px 2px 10px; border-bottom:0; }
body #createMoodboardDock #createAssetTabs { align-self:center; align-items:center; gap:2px; padding:3px; border-radius:9px; background:color-mix(in srgb,var(--muted) 9%,transparent); }
body #createMoodboardDock #createAssetTabs [role="tab"] { min-height:30px; margin:0; padding:5px 12px; border:1px solid transparent; border-radius:6px; }
body #createMoodboardDock #createAssetTabs [aria-selected="true"] { background:var(--surface-raised); border-color:var(--line); color:var(--accent); box-shadow:0 1px 3px #00000012; }
body #createMoodboardDock :is(#userLibraryCategories,.included-category-tabs) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin:0 2px 12px; padding:4px; border:0; border-radius:10px; background:color-mix(in srgb,var(--muted) 6%,var(--surface)); overflow:visible; }
body #createMoodboardDock :is(#userLibraryCategories,.included-category-tabs) button { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:34px; padding:6px 5px; white-space:normal; border:1px solid transparent; border-radius:7px; background:color-mix(in srgb,var(--surface-raised) 55%,transparent); font-size:11px; font-weight:500; line-height:1.35; }
body #createMoodboardDock :is(#userLibraryCategories,.included-category-tabs) button[aria-selected="true"] { background:var(--surface-raised); border-color:color-mix(in srgb,var(--line) 65%,transparent); color:var(--accent); box-shadow:0 1px 2px #0000000d; }
body #createMoodboardDock :is(.included-upload,.image-order-lock,.included-clear-selection) { min-height:30px; height:auto; border-radius:7px; box-shadow:0 1px 2px #00000008; }
body #createMoodboardDock :is(.included-section > header,#userImageLibrary .reference-library-section > header) { padding:0 2px 8px; margin:0; min-height:32px; }
body #createMoodboardDock :is(#userLibraryCategories,.included-category-tabs) button::before { content:""; flex:0 0 15px; width:15px; height:15px; background:currentColor; mask:var(--category-icon) center/contain no-repeat; }
@media(hover:hover) { body #createMoodboardDock :is(#userLibraryCategories,.included-category-tabs) button:not([aria-selected="true"]):hover { background:color-mix(in srgb,var(--muted) 15%,var(--surface)); } }
@container asset-panel (max-width:300px) { body #createMoodboardDock :is(#userLibraryCategories,.included-category-tabs) button { flex-direction:column; gap:4px; font-size:10px; } }
body #createMoodboardDock :is([data-category="model"],[data-user-section="model"]) { --category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2021v-3a4%204%200%200%201%208%200v3M12%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208%22%2F%3E%3C%2Fsvg%3E"); }
body #createMoodboardDock :is([data-category="product"],[data-user-section="product"]) { --category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%207%209-4%209%204v10l-9%204-9-4ZM3%207l9%205%209-5M12%2012v9%22%2F%3E%3C%2Fsvg%3E"); }
body #createMoodboardDock :is([data-category="wardrobe"],[data-user-section="wardrobe"]) { --category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m8%203-5%204%203%204%202-2v12h8V9l2%202%203-4-5-4c0%204-8%204-8%200Z%22%2F%3E%3C%2Fsvg%3E"); }
body #createMoodboardDock :is([data-category="mood"],[data-user-section="mood"]) { --category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%201%200%200%2018h2a2%202%200%200%200%200-4h-1a2%202%200%200%201%200-4h3a5%205%200%200%200%200-10ZM7%2010h.01M9%206h.01M15%206h.01%22%2F%3E%3C%2Fsvg%3E"); }
body #createMoodboardDock :is([data-category="background"],[data-user-section="background"]) { --category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h18v18H3ZM3%2017l6-6%204%204%203-3%205%205M8%207h.01%22%2F%3E%3C%2Fsvg%3E"); }
body #createMoodboardDock :is([data-category="typography"],[data-user-section="typography"]) { --category-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206V3h16v3M12%203v18M8%2021h8%22%2F%3E%3C%2Fsvg%3E"); }
body #createMoodboardDock.show-samples #userLibraryCategories, body #createMoodboardDock .included-category-tabs[hidden] { display:none; }
/* Both sources use the same stable six-category layout and selection surface. */
#createMoodboardDock { container-type: inline-size; container-name: asset-panel; }
/* Source tab geometry is owned by task-toolbar.css. */
#createMoodboardDock #workspace-tab-browser {
  flex: 0 0 34px;
  width: 34px;
  min-height: 34px;
  padding: 7px;
  border-radius: 9px;
}
#createMoodboardDock #workspace-tab-browser svg { width: 18px; height: 18px; stroke-width: 1.6; }
#createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  min-height: 0;
  padding: 8px;
  overflow: visible;
  border-bottom: 1px solid var(--line);
  background: var(--workspace-panel);
}
#createMoodboardDock.show-samples #userLibraryCategories,
#createMoodboardDock :is(#userLibraryCategories, .included-category-tabs)[hidden] { display: none; }
#createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) button {
  min-width: 0;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none;
}
#createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) button[aria-selected="true"] {
  color: var(--accent);
  background: var(--surface-raised);
  border-color: var(--line);
  box-shadow: var(--ui-chrome-shadow);
}
#createMoodboardDock .included-card { border-color: var(--line); box-shadow: var(--ui-chrome-shadow); }
#createMoodboardDock .included-card img { background: #fff; }
#createMoodboardDock .included-card-title { font-weight: 600; }
.library-search-input {
  min-height: 34px;
  border-radius: 9px;
  font-size: calc(12px + var(--app-font-increase, 1pt));
  box-shadow: none;
}
.library-action { font-size: calc(11px + var(--app-font-increase, 1pt)); font-weight: 500; }
.history-tools { gap: 12px; }
#assetSelectionBar { padding-inline: 12px; }
#createMoodboardDock #assetSelectionBar { flex-wrap:wrap; gap:6px; }
#createMoodboardDock #assetSelectionBar #selectAllSamplesButton {
  margin-inline-start:auto; min-height:32px; padding:5px 8px;
  border:1px solid var(--line); border-radius:8px; background:var(--surface-subtle);
  color:var(--text); font:inherit; font-size:12px;
}
#createMoodboardDock #selectAllSamplesButton[aria-pressed="true"] { color:var(--accent); }
#createMoodboardDock #selectAllSamplesButton:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#createMoodboardDock:not(.show-samples) #selectAllSamplesButton { display:none; }

/* Neutral hover feedback leaves blue for a deliberate selection or focus. */
@media (hover: hover) and (pointer: fine) {
  body :is(#railSettingsButton, #resetPromptButton, #resetGenerationSettingsButton,
    .gallery-density-button, .library-action):not(:disabled):hover {
    color: var(--text);
    background: var(--surface-hover);
    border-color: var(--line);
  }
  #createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) button:not([aria-selected="true"]):hover {
    color: var(--text);
    background: var(--surface-hover);
  }
}
body :is(#railSettingsButton, #resetPromptButton, #resetGenerationSettingsButton,
  .gallery-density-button, .library-action):focus-visible,
#createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (pointer: coarse) {
  body .stage > #workspaceNav { height: auto; min-height: 56px; }
  body :is(#railSettingsButton, #resetPromptButton, #resetGenerationSettingsButton,
    .gallery-density-button, .library-action, .library-search-clear) { min-width: 44px; min-height: 44px; }
  #createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) button { min-height: 44px; }
  body :is(#railSettingsButton, #resetPromptButton, #resetGenerationSettingsButton,
    .gallery-density-button) { flex-basis: 44px; }
  #createMoodboardDock #workspace-tab-browser { flex-basis: 44px; min-width: 44px; min-height: 44px; }
}
@media (forced-colors: active) {
  body #generationReferences .reference-role-card.has-reference:not(:focus-visible),
  body .shot-size-picker .shot-size-option[aria-pressed="true"]:not(:focus-visible),
  #createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) button[aria-selected="true"] {
    outline: 1px solid Highlight;
    outline-offset: -2px;
    border-color: Highlight;
  }
}

@container asset-panel (min-width: 340px) {
  #createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container asset-panel (min-width: 720px) {
  #createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
#browserPanel :is(.browser-controls, .browser-sidebar-heading) svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
/* Keep navigation together above the address field in the compact sidebar. */
#browserPanel .browser-controls {
  display: grid;
  grid-template-columns: 34px 34px minmax(0, 1fr) 40px;
  gap: 6px;
  align-items: center;
}
#browserPanel .browser-controls [data-browser-action] { width: 34px; padding: 7px; grid-row: 1; }
#browserPanel .browser-controls [data-browser-action="back"] { grid-column: 1; }
#browserPanel .browser-controls [data-browser-action="forward"] { grid-column: 2; }
#browserPanel .browser-controls [data-browser-action="reload"] { grid-column: 3; }
#browserPanel #browserAddress { grid-column: 1 / 4; grid-row: 2; width: 100%; min-width: 0; }
#browserPanel .browser-controls [type="submit"] { grid-column: 4; grid-row: 2; padding-inline: 4px; }
#browserPanel #browserExternal { grid-column: 1 / -1; grid-row: 3; }
@media (pointer: coarse) {
  #browserPanel .browser-controls { grid-template-columns: 44px 44px minmax(0, 1fr) 44px; }
  #browserPanel .browser-controls [data-browser-action] { width: 44px; }
}

/* The preview title bar owns mode switching; avoid a second title/exit row. */
#mainEditContext { padding: 0; margin: 0 0 8px; }
#mainEditContext > div { display: none; }
#mainEditContext small { margin: 0; font-size: 11px; line-height: 1.5; }
#canvasPanel.has-contained-viewer[id] .preview-mode-header { visibility: hidden; }

/* Translated text-design labels keep the full card width; tools get their own row. */
body #generationReferences .reference-role-card[data-reference-role="typography"] > .reference-role-picker {
  padding-inline: 10px;
}
body #generationReferences .reference-role-card[data-reference-role="typography"] .typography-card-actions {
  position: static;
  inset: auto;
  order: 2;
  align-self: flex-end;
  padding: 0 8px 5px;
  opacity: 1;
  pointer-events: auto;
}

/* Crossfade a single frame so gradients, borders and native controls switch together. */
:root[data-theme-transition="true"] *,
:root[data-theme-transition="true"] *::before,
:root[data-theme-transition="true"] *::after { transition: none !important; }
:root[data-theme-transition="true"]::view-transition-group(root) { animation-duration: 220ms; }
:root[data-theme-transition="true"]::view-transition-old(root),
:root[data-theme-transition="true"]::view-transition-new(root) {
  animation-duration: 220ms; animation-timing-function: ease-in-out;
  mix-blend-mode: normal;
}
:root[data-theme-transition="true"]::view-transition { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Quiet attachment tiles: identity above, utility actions below, no split-box divider. */
body #generationReferences .reference-role-card.has-split-reference {
  --reference-visual-size:36px;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:1fr auto;
  align-content:stretch; align-self:stretch;
  min-height:110px; border-radius:14px;
  border-color:color-mix(in srgb,var(--line) 65%,transparent);
  background:var(--composer-card-solid);
  box-shadow:0 1px 2px rgb(0 0 0 / 3%);
}
body #generationReferences .reference-role-card.has-reference {
  --reference-visual-size:42px;
}
body #generationReferences .reference-role-card.has-reference:not(:focus-visible) {
  border-color:color-mix(in srgb,var(--accent) 32%,var(--line));
}
body #generationReferences .has-split-reference > .reference-add-surface {
  order:0; min-width:0; display:flex; flex-direction:column; cursor:pointer;
  border-radius:13px 13px 0 0;
}
body #generationReferences .reference-add-surface > .reference-role-picker {
  position:relative; inset:auto; display:grid; grid-template-columns:var(--reference-visual-size) minmax(0,1fr);
  gap:10px; width:100%; height:auto !important; min-height:66px !important;
  max-height:none !important; padding:12px 12px 8px; align-items:start;
  box-sizing:border-box; border-radius:13px 13px 0 0; flex:0 0 auto;
}
body #generationReferences .reference-role-card .reference-role-visual {
  display:grid; place-items:center; align-self:start; width:var(--reference-visual-size); height:var(--reference-visual-size);
  border-radius:10px; border:0;
  background:color-mix(in srgb,var(--muted) 8%,var(--composer-card-solid));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 25%,transparent);
}
body #generationReferences .reference-role-icon { width:100%; height:100%; color:var(--muted); }
body #generationReferences .reference-role-icon svg { width:21px; height:21px; stroke-width:1.6; }
body #generationReferences .reference-role-visual :is(.reference-role-thumbnail,.reference-thumbnail-open) {
  display:block; width:100%; height:100%; min-width:0; padding:0; border:0; border-radius:10px; background:transparent;
}
body #generationReferences .reference-role-visual .reference-role-image {
  display:block; width:100%; height:100%; border-radius:10px; object-fit:cover;
}
body #generationReferences .reference-role-card .reference-role-copy { align-self:start; gap:4px; text-align:start; }
body #generationReferences .reference-role-card .reference-role-copy strong { line-height:1.35; overflow-wrap:anywhere; }
body #generationReferences .reference-role-card .reference-role-copy small {
  font-size:10.5px; line-height:1.45; color:var(--muted); overflow-wrap:anywhere;
}
body #generationReferences .has-split-reference .reference-add-surface > .reference-card-actions {
  display:flex; flex-wrap:wrap; min-height:0; margin-top:auto; gap:4px 6px; padding:0 9px 3px;
}
body #generationReferences .reference-card-actions .reference-region-trigger {
  min-width:0; white-space:normal; overflow-wrap:anywhere; text-align:start;
}
body #generationReferences .reference-card-actions :is(.reference-region-trigger,.background-color-trigger) {
  border-color:transparent; border-radius:6px; background:var(--surface-subtle);
}
.gpt-account-menu-action[role="menuitemradio"] svg { opacity:0; }
.gpt-account-menu-action[aria-checked="true"] { color:var(--accent); background:var(--surface-subtle); }
.gpt-account-menu-action[aria-checked="true"] svg { opacity:1; }
/* Keep the whole footer as the replacement drop area; only its button is inset. */
body #generationReferences .has-split-reference > .reference-add-footer {
  position:relative; order:1; display:grid; grid-template-columns:minmax(0,1fr);
  width:100%; min-width:0; flex-shrink:0; border-radius:0 0 13px 13px; margin:0;
  gap:0; padding:5px 8px 8px; align-self:end; align-items:stretch;
  border:0; background:transparent; box-sizing:border-box;
}
body #generationReferences .reference-add-footer > .reference-replace-label {
  display:flex; position:static; align-items:center; justify-content:center; gap:5px;
  pointer-events:auto; cursor:pointer;
  margin:0; width:100%; min-width:0; height:auto; min-height:28px; padding:5px 8px;
  border:1px solid color-mix(in srgb,var(--line) 40%,transparent); border-radius:7px;
  background:color-mix(in srgb,var(--muted) 6%,var(--composer-card-solid)); color:var(--text);
  box-shadow:0 1px 1px rgb(0 0 0 / 2%);
  font:inherit; font-size:11px; font-weight:500; line-height:1.4; white-space:normal; overflow-wrap:anywhere;
}
@media (hover:hover) {
  body #generationReferences .reference-add-footer > button:not(:disabled):hover { background:var(--surface-hover); color:var(--text); }
  body #generationReferences .reference-role-card:not(.has-reference):not(.is-dragging):hover { border-color:var(--line-strong); }
}
@media (pointer:coarse) {
  body #generationReferences .reference-add-footer > .reference-replace-label { min-height:44px; }
}
body #generationReferences .reference-add-footer > button:disabled {
  opacity:.5; cursor:default; color:var(--muted); border-color:transparent; box-shadow:none;
}
/* Emphasize the exact drop action without moving the target under the pointer. */
body #generationReferences .has-split-reference.is-dragging[data-drop-action="replace"] > .reference-add-footer {
  background:color-mix(in srgb,var(--accent) 21%,var(--composer-card-solid));
  border-color:var(--accent); color:var(--accent); opacity:1;
  box-shadow:none;
}
body #generationReferences .has-split-reference.is-dragging[data-drop-action="replace"] .reference-replace-label {
  color:var(--accent); border-color:var(--accent); background:var(--accent-faint); opacity:1;
}
body #generationReferences .has-split-reference.is-dragging[data-drop-action="add"] > .reference-add-surface {
  background:color-mix(in srgb,var(--accent) 9%,var(--composer-card-solid));
}
body #generationReferences .reference-add-footer > button:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
body #generationReferences .reference-add-footer > button svg { width:14px; height:14px; flex-shrink:0; }
body #generationReferences .reference-attached-thumbnails { display:flex; flex:1; min-width:0; gap:5px; overflow-x:auto; padding:5px 3px; }
body #generationReferences .reference-attached-thumbnails[hidden] { display:none; }
body #generationReferences .reference-attached-thumbnails:empty { padding-block:0; }
body #generationReferences .reference-attached-thumbnails > .reference-role-thumbnail { position:relative; display:block; flex:0 0 26px; width:26px; height:29px; }
body #generationReferences .reference-attached-thumbnails .reference-thumbnail-open { display:block; width:100%; height:100%; padding:0; border:1px solid var(--line); border-radius:5px; overflow:hidden; background:var(--surface-subtle); }
body #generationReferences .reference-attached-thumbnails .reference-role-image { display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; border:0; border-radius:0; box-shadow:none; }
body #generationReferences .reference-attached-thumbnails .reference-role-thumbnail-remove { position:absolute; right:-3px; top:-4px; width:14px; height:14px; padding:0; border:0; border-radius:50%; background:var(--composer-card-solid); font-size:11px; line-height:14px; }
body #referenceDetails { container:reference-cards / inline-size; }
@container reference-cards (max-width:340px) {
  body .composer-fields #referenceDetails > .reference-role-grid { grid-template-columns:minmax(0,1fr); }
}
@media (forced-colors:active) {
  body #generationReferences .reference-role-card.has-split-reference { border:1px solid CanvasText; }
  body #generationReferences .reference-add-footer > .reference-replace-label { border:1px solid ButtonText; }
  body #generationReferences .reference-add-footer > button:disabled { color:GrayText; opacity:1; }
}
/* The optional-prompt hint lives in the input; keep compatibility warnings visible. */
#generationComposerFields .prompt-intro:has(#compositionGuideNotice[hidden]) { display:none; }
#generationComposerFields .composition-guide-icon,
#generationComposerFields #compositionGuideText { display:none; }
#generationComposerFields .prompt-intro { margin:0 0 8px; }
body .composer-fields :is(#generationReferences,.generation-options-bar,#shotSizePicker,#cameraAnglePicker) { width:100%; min-width:0; box-sizing:border-box; }
body .composer-fields .generation-options-bar { gap:12px; padding-inline:0; }
body .composer-fields :is(#shotSizePicker,#cameraAnglePicker) { margin-inline:0; padding-inline:0; }
body .composer-fields #referenceDetails > .reference-role-grid { gap:8px; }
body .composer-fields .shot-size-options { min-width:0; gap:4px; }
body .composer-fields .shot-size-option { min-width:0; padding-inline:5px; }
#copyEditorDialog { box-sizing:border-box; width:min(480px,calc(100vw - 32px)); max-height:85vh; overflow:auto; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--composer-card-solid); color:var(--text); box-shadow:0 16px 48px rgb(0 0 0 / 18%); }
#copyEditorDialog::backdrop { background:rgb(0 0 0 / 28%); }
#copyEditorDialog > header { display:flex; direction:ltr; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
#copyEditorDialog > header > h2 { min-width:0; overflow-wrap:anywhere; text-align:right; }
#copyEditorDialog > header > [data-copy-close] { flex-shrink:0; }
#copyEditorDialog h2 { margin:0; font-size:17px; }
#copyEditorDialog button { font-size:13px; }
#copyEditorDialog label, #copyEditorDialog h3 { font-size:13px; font-weight:600; margin:10px 0 6px; }
#copyEditorDialog textarea { box-sizing:border-box; width:100%; min-height:64px; padding:10px 12px; font-size:14px; font-weight:400; line-height:1.5; color:var(--text); background:var(--surface-subtle); border:1px solid var(--line); border-radius:9px; resize:vertical; }
#copyEditorDialog textarea::placeholder { font-size:14px; font-weight:400; }
#copyEditorDialog .typography-copy-help { font-size:12px; color:var(--muted); }
#copyEditorDialog .copy-advanced { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
#copyEditorDialog summary { cursor:pointer; font-size:13px; }
#copyEditorDialog .typography-inline-controls { display:flex; flex-wrap:wrap; gap:6px; }
#copyEditorDialog [hidden] { display:none !important; }
body #generationReferences #basicCopyOptions { padding:2px 8px 8px; border:0; }
body #generationReferences #basicCopySummary { width:100%; font-size:12px; }
#copyEditorDialog { width:min(440px,calc(100vw - 24px)); padding:0; border-radius:14px; }
#copyEditorDialog > header { margin:0; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface-subtle); }
#copyEditorDialog h2 { font-size:15px; font-weight:600; line-height:1.4; }
#copyEditorDialog [data-copy-close] { display:grid; place-items:center; width:28px; height:28px; padding:5px; border:0; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; }
#copyEditorDialog [data-copy-close] svg { width:18px; height:18px; }
#copyEditorDialog [data-copy-close]:hover { background:var(--surface-hover); color:var(--text); }
#copyEditorDialog button:focus-visible, #copyEditorDialog summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#copyEditorDialog #basicCopyEditor { padding:16px; }
#copyEditorDialog .prompt-preset-detail { margin:0; padding:0; border:0; }
#copyEditorDialog label { display:block; margin:0 0 6px; font-size:12px; line-height:1.5; }
#copyEditorDialog .poster-copy-secondary, #copyEditorDialog .poster-details-field { margin-top:14px; }
#copyEditorDialog textarea { display:block; min-height:54px; padding:9px 11px; font-family:inherit; }
#copyEditorDialog textarea:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
#copyEditorDialog .poster-details-toggle { margin:8px 0 0; padding:5px 0; border:0; background:transparent; color:var(--accent); font-size:12px; }
#copyEditorDialog .typography-copy-help { margin:10px 0 0; line-height:1.5; }
#copyEditorDialog .copy-advanced { margin-top:14px; padding-top:12px; }
#copyEditorDialog .copy-advanced > section { padding-top:10px; }
body #generationReferences #basicCopySummary { display:flex; align-items:center; gap:8px; padding:8px 9px; min-width:0; border:0; border-radius:7px; background:var(--surface-subtle); }
body #generationReferences #basicCopySummary:hover { background:var(--surface-hover); }
body #generationReferences #basicCopySummary [data-copy-action] { order:-1; flex:0 0 auto; color:var(--accent); font-size:12px; font-weight:500; }
body #generationReferences #basicCopySummary [data-copy-preview] { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:start; font-size:12px; font-weight:400; color:var(--muted); }
#copyEditorDialog .typography-inline-controls { margin:7px 0 0; justify-content:flex-end; }
#copyEditorDialog .typography-layout-options { display:flex; flex-wrap:wrap; gap:8px 16px; margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--line); }
#copyEditorDialog .typography-layout-options label { display:flex; align-items:center; gap:6px; margin:0; font-weight:400; }

/* Compact history: native result thumbnails beside a single-line summary. */
#copyEditorDialog { width:min(580px,calc(100vw - 24px)); max-height:90vh; overflow:auto; }
#copyEditorDialog #promptPresetDetailField { display:none; }
.copy-layout-tabs,.copy-layout-toolbar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.copy-layout-tabs button,.copy-layout-toolbar select { border:1px solid var(--line); border-radius:7px; padding:6px 8px; background:var(--surface); color:var(--text); font:inherit; font-size:12px; }
.copy-layout-tabs button[aria-pressed="true"] { color:var(--accent); background:var(--accent-faint); border-color:var(--accent); }
.copy-layout-canvas { position:relative; margin:0 auto 12px; background:var(--surface-raised); border:1px solid var(--line); border-radius:7px; overflow:hidden; background-image:linear-gradient(to right,transparent 32.9%,var(--line) 33%,transparent 33.2%,transparent 66%,var(--line) 66.2%,transparent 66.4%),linear-gradient(to bottom,transparent 32.9%,var(--line) 33%,transparent 33.2%,transparent 66%,var(--line) 66.2%,transparent 66.4%); }
.copy-layout-box { position:absolute; width:46%; border:1px solid transparent; border-radius:5px; }
.copy-layout-gradient-text { position:absolute; inset:0; pointer-events:none; user-select:none; white-space:pre; text-align:center; color:transparent; background-clip:text; -webkit-background-clip:text; }
.copy-layout-gradient-text[hidden] { display:none; }
.copy-layout-canvas { background-image:none; isolation:isolate; }
.copy-layout-subject { position:absolute; width:34%; height:76%; left:33%; top:16%; z-index:2; cursor:grab; touch-action:none; color:light-dark(#c1c6cf,#555d69); border:1px solid transparent; border-radius:4px; }
.copy-layout-subject[data-selected="true"], .copy-layout-subject:focus-visible { border-color:var(--accent); outline:none; }
.copy-layout-subject[data-selected="true"] .copy-layout-resize { display:block; }
.copy-layout-subject:active { cursor:grabbing; }
.copy-layout-subject svg { display:block; width:100%; height:100%; }
.copy-layout-depth { display:flex; gap:2px; padding:2px; border:1px solid var(--line); border-radius:7px; }
.copy-layout-depth button { border:0; background:transparent; color:var(--muted); border-radius:5px; padding:5px 7px; font:inherit; font-size:11px; }
.copy-layout-depth button[aria-pressed="true"] { background:var(--accent-faint); color:var(--accent); }
.copy-layout-toolbar { align-items:center; }
.copy-layout-toolbar > span { font-size:11px; color:var(--muted); }
.copy-layout-toolbar input[type="range"] { width:100px; accent-color:var(--accent); }
.copy-layout-box[data-selected="true"] { border-color:var(--accent); background:transparent; }
#copyEditorDialog .copy-layout-box:focus-within { outline:1px solid var(--accent); outline-offset:1px; }
#copyEditorDialog .copy-layout-box textarea:focus-visible { outline:0; box-shadow:none; }
#copyEditorDialog .copy-layout-box textarea { width:100%; min-height:0; height:52px; padding:3px; border:0; background:transparent; resize:none; box-shadow:none; font-size:13px; text-align:center; white-space:pre; overflow-wrap:normal; word-break:normal; }
#copyEditorDialog .copy-layout-main textarea { font-size:18px; font-weight:600; }
#copyEditorDialog .copy-layout-details textarea { font-size:11px; }
.copy-layout-box { cursor:grab; touch-action:none; }
.copy-layout-box:active { cursor:grabbing; }
#copyEditorDialog .copy-layout-box textarea[readonly] { pointer-events:none; user-select:none; }
#copyEditorDialog .copy-layout-box[data-editing="true"] { cursor:text; touch-action:auto; }
.copy-layout-resize { display:none; position:absolute; width:7px; height:7px; min-height:0; padding:0; border:1px solid var(--accent); background:var(--surface-raised); border-radius:2px; touch-action:none; }
.copy-layout-box[data-selected="true"] .copy-layout-resize { display:block; }
.copy-layout-resize[data-corner^="n"] { top:-4px; }
.copy-layout-resize[data-corner^="s"] { bottom:-4px; }
.copy-layout-resize[data-corner$="w"] { left:-4px; }
.copy-layout-resize[data-corner$="e"] { right:-4px; }
.copy-layout-resize:is([data-corner="nw"],[data-corner="se"]) { cursor:nwse-resize; }
.copy-layout-resize:is([data-corner="ne"],[data-corner="sw"]) { cursor:nesw-resize; }
.copy-layout-toolbar[hidden] { display:none; }
.copy-layout-colors { display:flex; align-items:center; gap:6px; }
.copy-layout-color-reset { display:grid; place-items:center; flex-shrink:0; width:30px; height:30px; padding:5px; border:0; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; }
.copy-layout-color-reset svg { width:20px; height:20px; }
.copy-layout-color-reset:not(:disabled):hover { color:var(--accent); background:var(--option-bg); }
.copy-layout-color-reset:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#copyEditorDialog .copy-layout-colors .background-color-trigger { min-height:30px; border:1px solid var(--line); border-radius:7px; background:var(--surface-raised); }
.copy-layout-remove { display:grid; place-items:center; width:30px; height:30px; padding:5px; border:1px solid var(--line); border-radius:7px; background:var(--surface-raised); color:var(--muted); cursor:pointer; }
.copy-layout-remove[hidden] { display:none; }
.copy-layout-remove:hover { color:#d33; }
.copy-layout-remove:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.copy-layout-toolbar input[type="color"] { width:32px; height:30px; padding:2px; border:1px solid var(--line); border-radius:6px; }
.copy-layout-help { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.copy-layout-color-help { margin:0; color:var(--muted); font-size:11px; line-height:1.6; white-space:normal; overflow-wrap:anywhere; }
body #copyEditorDialog { position:fixed; inset:auto; margin:0; max-width:none; max-height:none; padding:0; overflow:hidden; }
body #copyEditorDialog[open] { display:flex; flex-direction:column; }
body #copyEditorDialog > header { flex:none; }
body #copyEditorDialog #basicCopyEditor { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
#copyEditorDialog .copy-layout-editor { flex:1; min-height:0; display:flex; flex-direction:column; container-type:inline-size; }
#copyEditorDialog .copy-layout-editor > :not(.copy-layout-stage) { flex:none; }
#copyEditorDialog .copy-layout-stage { flex:1; min-height:0; display:grid; place-items:center; overflow:hidden; margin-top:12px; margin-bottom:0; }
#copyEditorDialog .copy-layout-stage .copy-layout-canvas { flex:none; margin:0; box-sizing:border-box; }
#browserPanel .browser-bookmark-item { display:inline-flex; align-items:center; min-width:0; border-radius:7px; }
#browserPanel .browser-bookmark-item:hover { background:var(--surface-hover); }
#browserPanel .browser-bookmark span:last-child { max-width:130px; overflow:hidden; text-overflow:ellipsis; }
#browserPanel .browser-bookmark-remove { border:0; background:transparent; color:var(--muted); padding:0; width:22px; height:26px; border-radius:5px; cursor:pointer; }
#browserPanel .browser-bookmark-remove:hover { color:var(--text); background:var(--surface-raised); }
#browserPanel .browser-bookmark-add { border:1px solid var(--line); border-radius:7px; background:var(--surface-raised); color:var(--accent); padding:5px 9px; font:inherit; font-size:12px; cursor:pointer; }
#browserPanel .browser-bookmark-form { display:grid; gap:8px; padding:12px; border-bottom:1px solid var(--line); background:var(--surface-raised); }
#browserPanel .browser-bookmark-form[hidden] { display:none; }
#browserPanel .browser-bookmark-form label { display:grid; gap:4px; font-size:12px; color:var(--muted); }
#browserPanel .browser-bookmark-form input { width:100%; min-width:0; padding:7px 9px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--text); }
#browserPanel .browser-bookmark-form > div { display:flex; gap:6px; justify-content:flex-end; }
#browserPanel .browser-bookmark-form button { font:inherit; font-size:12px; padding:6px 12px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--text); }
#browserPanel .browser-bookmark-form button[type="submit"] { background:var(--accent); color:white; border-color:transparent; }

/* Compact browser chrome: navigation, address and saved sites share a grid. */
body #generationReferences .reference-card-actions > #basicCopyOptions { margin:0; padding:0; flex:0 1 auto; width:auto; max-width:100%; order:2; }
body #generationReferences .reference-card-actions #basicCopySummary { width:100%; min-height:28px; padding:5px 6px; justify-content:center; color:var(--accent); }
body #generationReferences .reference-card-actions #basicCopySummary [data-copy-action] { flex:0 1 auto; font-size:11px; white-space:normal; overflow-wrap:anywhere; }
#browserPanel { container:mini-browser / inline-size; }
#browserPanel .browser-sidebar-heading { min-height:52px; padding:10px 14px; gap:12px; background:var(--workspace-heading); }
#browserPanel .browser-sidebar-heading strong { font-size:13px; font-weight:600; }
#browserPanel #browserSidebarClose { width:30px; min-height:30px; padding:6px; border:0; border-radius:8px; background:transparent; color:var(--muted); box-shadow:none; }
#browserPanel #browserSidebarClose:hover { color:var(--text); background:var(--surface-hover); }
#browserPanel .browser-controls { display:grid; grid-template-columns:repeat(3,36px) minmax(0,1fr) repeat(2,36px); gap:8px; padding:0 16px 16px; align-items:center; }
#browserPanel .browser-controls > :is(button,a) { display:grid; place-items:center; order:0; margin:0; width:36px; min-height:36px; padding:8px; border:0; border-radius:8px; background:transparent; color:var(--muted); box-shadow:none; }
#browserPanel .browser-controls > :is(button,a)[hidden] { display:none; }
#browserPanel .browser-controls > :is(button,a):not(:disabled):hover { color:var(--text); background:var(--surface-hover); }
#browserPanel .browser-controls svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#browserPanel .browser-controls [data-browser-action] { width:36px; padding:8px; grid-row:1; }
#browserPanel .browser-controls #browserAddress { grid-column:4; grid-row:1; order:0; width:100%; min-width:0; min-height:34px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:var(--surface-raised); font-size:12px; font-weight:400; text-overflow:ellipsis; }
#browserPanel .browser-controls > button[type="submit"] { grid-column:5; grid-row:1; order:0; color:var(--accent); }
#browserPanel .browser-controls #browserExternal { grid-column:6; grid-row:1; margin:0; }
#browserPanel .browser-bookmarks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:10px; padding:0 16px 14px; max-height:190px; min-height:0; border-bottom:1px solid var(--line); scrollbar-width:thin; }
#browserPanel .browser-bookmark-item { display:flex; min-width:0; border:1px solid var(--line); border-radius:9px; background:var(--surface-raised); }
#browserPanel .browser-bookmark { display:flex; flex:1; min-width:0; gap:8px; padding:10px 2px 10px 10px; font-size:11px; font-weight:500; }
#browserPanel .browser-bookmark span:last-child { min-width:0; max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#browserPanel .bookmark-mark { flex:0 0 18px; width:18px; height:18px; border-radius:5px; font-size:11px; }
#browserPanel .browser-bookmark-remove { flex:0 0 28px; align-self:center; width:28px; height:32px; min-height:32px; margin:0 4px; font-size:16px; opacity:.5; }
#browserPanel .browser-bookmark-item:is(:hover,:focus-within) .browser-bookmark-remove { opacity:1; }
#browserPanel .browser-bookmark-add { grid-column:1/-1; justify-self:end; min-height:28px; padding:3px 8px; border:0; background:transparent; font-size:11px; font-weight:500; }
#browserPanel .browser-bookmark-add:hover { background:var(--accent-faint); }
#browserPanel #browserStatus { margin:0; min-height:0; padding:6px 16px; color:var(--muted); font-size:11px; line-height:1.45; text-align:start; overflow-wrap:anywhere; border-bottom:1px solid var(--line); }
#browserPanel #browserViewport { min-height:120px; background:var(--workspace-content); }
#browserPanel .browser-sidebar-heading { align-items:center; color:var(--text); }
#browserPanel .browser-bookmark { align-items:center; color:var(--text); }
#browserPanel #browserAddress { color:var(--text); text-align:start; }
#browserPanel #browserAddress::placeholder { color:var(--muted); }
body[data-active-view="create"].browser-sidebar-open .stage:not([data-browser-motion]) > #createSideRail { visibility:visible; pointer-events:auto; }
body[data-active-view="create"] .stage[data-browser-motion] > #createSideRail { visibility:visible; pointer-events:none; }
body[data-active-view="create"].browser-sidebar-open .stage.browser-within-assets > #browserPanel { top:var(--browser-sidebar-top,64px); bottom:auto; width:calc(var(--workspace-assets-total-width) - 16px); }
#browserPanel .browser-bookmarks { max-height:100px; }
#browserPanel :is(button,a,input):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#browserPanel .browser-bookmark-form { margin:0; padding:12px; background:var(--workspace-heading); }
@container mini-browser (max-width:420px) {
  #browserPanel .browser-controls { grid-template-columns:repeat(3,36px) minmax(0,1fr) 36px; }
  #browserPanel .browser-controls #browserExternal { grid-column:5; grid-row:1; }
  #browserPanel .browser-controls #browserAddress { grid-column:1/5; grid-row:2; }
  #browserPanel .browser-controls > button[type="submit"] { grid-column:5; grid-row:2; }
  #browserPanel .browser-bookmarks { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:206px; }
}
@media (pointer:coarse) {
  #browserPanel .browser-controls > :is(button,a), #browserPanel #browserSidebarClose { min-height:40px; }
  #browserPanel .browser-bookmark-remove { min-height:40px; }
}

/* Browser above the existing image library, sharing the available height equally. */
body[data-active-view="create"].browser-sidebar-open .stage > #browserPanel {
  height:calc((100% - var(--browser-sidebar-top,64px) - 20px) / 2); bottom:auto;
}
body[data-active-view="create"].browser-sidebar-open .stage > #createSideRail {
  grid-area:auto; position:absolute; right:12px; top:calc(var(--browser-sidebar-top,64px) + (100% - var(--browser-sidebar-top,64px) - 20px) / 2 + 8px);
  bottom:12px; width:min(var(--workspace-browser-width,400px),calc(100% - 24px));
  height:calc((100% - var(--browser-sidebar-top,64px) - 20px) / 2); max-height:none;
  margin:0; min-height:0; visibility:visible;
}
body[data-active-view="create"].browser-sidebar-open .stage.browser-within-assets > #createSideRail {
  right:16px; width:calc(var(--workspace-assets-total-width) - 16px); margin:0;
}
#browserPanel .browser-sidebar-heading { min-height:30px; padding:2px 8px; gap:6px; }
#browserPanel .browser-sidebar-heading strong { font-size:11px; }
#browserPanel #browserSidebarClose { width:26px; min-height:26px; padding:5px; }
#browserPanel .browser-controls { grid-template-columns:repeat(3,26px) minmax(0,1fr) repeat(2,26px); gap:3px; padding:3px 6px; }
#browserPanel .browser-controls > :is(button,a), #browserPanel .browser-controls [data-browser-action] { width:26px; min-height:28px; padding:5px; }
#browserPanel .browser-controls #browserAddress { grid-column:4; grid-row:1; min-height:28px; padding:4px 6px; }
#browserPanel .browser-controls > button[type="submit"] { grid-column:5; grid-row:1; }
#browserPanel .browser-controls #browserExternal { grid-column:6; grid-row:1; }
#browserPanel .browser-bookmarks { display:flex; flex-wrap:nowrap; align-items:center; gap:4px; padding:3px 6px; min-height:34px; max-height:34px; overflow-x:auto; overflow-y:hidden; }
#browserPanel .browser-bookmark-item { position:relative; flex:0 0 28px; width:28px; height:28px; border:0; background:transparent; }
#browserPanel .browser-bookmark { flex:none; display:grid; place-items:center; width:28px; height:28px; padding:0; }
#browserPanel .bookmark-mark { width:18px; height:18px; font-size:12px; }
#browserPanel .browser-bookmark-remove { position:absolute; right:-2px; top:-2px; width:12px; height:12px; min-height:12px; margin:0; font-size:12px; line-height:1; opacity:0; pointer-events:none; }
#browserPanel .browser-bookmark-item:is(:hover,:focus-within) .browser-bookmark-remove { opacity:1; pointer-events:auto; }
#browserPanel .browser-bookmark-add { flex:0 0 28px; width:28px; height:28px; min-height:28px; padding:5px; display:grid; place-items:center; }
#browserPanel .browser-bookmark-add svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
#browserPanel #browserStatus[hidden] { display:none; }
#browserPanel #browserViewport { min-height:0; }
@container mini-browser (max-width:260px) {
  #browserPanel .browser-controls { grid-template-columns:repeat(3,26px) minmax(0,1fr) 26px; }
  #browserPanel .browser-controls #browserExternal { grid-column:5; grid-row:1; }
  #browserPanel .browser-controls #browserAddress { grid-column:1/5; grid-row:2; }
  #browserPanel .browser-controls > button[type="submit"] { grid-column:5; grid-row:2; }
}
@media (pointer:coarse) {
  #browserPanel .browser-controls > :is(button,a), #browserPanel #browserSidebarClose { min-height:36px; }
  #browserPanel .browser-bookmark-remove { width:20px; height:20px; min-height:20px; }
}

/* macOS-style text-layout sheet: quiet surfaces and one clear selection ring. */
#canvasSurface > .preview-mode-header { inset:0 0 auto; min-height:36px; justify-content:flex-start; flex-wrap:nowrap; gap:8px; }
#canvasSurface .preview-mode-header > .edit-tool-palette { order:1; }
#canvasSurface .preview-mode-header > .edit-tool-palette { display:none; }
#canvasPanel.is-editing-image .preview-mode-header > .edit-tool-palette {
  position:absolute; inset:auto; left:50%; top:0;
  transform:translateX(-50%); animation:none; pointer-events:auto; flex:0 1 auto; min-width:0;
  display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:3px;
  width:max-content; max-width:100%; height:auto; margin:0; padding:4px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface-raised); box-shadow:0 2px 8px #0000000a; overflow-x:auto;
}
#canvasPanel.is-editing-image .preview-mode-header[data-toolbar-stacked] > .edit-tool-palette { top:44px; }
#canvasPanel.is-editing-image #canvasSurface.has-stacked-edit-toolbar[id] #canvasImageLink { padding-top:112px; }
#canvasSurface .preview-mode-header .edit-tool-palette button { flex:0 0 28px; width:28px; height:28px; min-height:28px; padding:4px; }
#canvasSurface .preview-mode-header .edit-tool-palette button svg { width:18px; height:18px; }
#canvasSurface .preview-mode-header :is(.edit-tool-modes,.edit-drawing-tools,.edit-tool-options) { display:flex; flex-direction:row; align-items:center; gap:3px; padding:0; margin:0; border:0; }
#canvasSurface .preview-mode-header .edit-tool-palette button { display:grid; place-items:center; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; }
#canvasSurface .preview-mode-header .edit-tool-palette button small { display:none; }
#canvasSurface .preview-mode-header .edit-tool-palette button[aria-pressed="true"] { color:var(--accent,#007aff); background:#007aff12; border-color:#007aff40; }
#canvasSurface .preview-mode-header .edit-tool-palette button:disabled { opacity:.35; cursor:default; }
#canvasSurface .preview-mode-header .edit-tool-palette button:not(:disabled):hover { background:#007aff12; }
#canvasSurface .preview-mode-header .edit-tool-palette button:focus-visible { outline:2px solid #007aff; outline-offset:1px; }
#canvasSurface .preview-mode-header .edit-brush-presets button span { display:block; border-radius:50%; background:currentColor; }
#canvasSurface .preview-mode-header .edit-tool-palette [data-undo] { margin:0; }
#canvasSurface .preview-mode-header .edit-tool-palette [data-undo]::before { display:none; }
#canvasSurface .preview-mode-header .edit-brush-settings { display:flex; flex-direction:row; align-items:center; gap:4px; margin:0; padding:0 0 0 6px; border:0; border-inline-start:1px solid var(--line); }
#canvasSurface .preview-mode-header .edit-brush-presets { display:flex; flex-direction:row; gap:2px; border:0; padding:0; }
#canvasSurface .preview-mode-header .edit-brush-settings input[type="range"] { writing-mode:horizontal-tb; direction:ltr; width:120px; min-width:120px; height:24px; margin:0; }
#canvasSurface .preview-mode-header .edit-brush-value { display:block; flex:0 0 24px; width:24px; min-width:24px; margin:0; padding:0; font:500 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-variant-numeric:tabular-nums; text-align:center; color:var(--muted); }
#canvasSurface .preview-mode-header .edit-brush-settings input[type="range"] { flex:0 0 120px; touch-action:none; }
#canvasSurface .preview-mode-header .edit-tool-palette > [data-hint] { display:none; }
#referencePreviewSection .reference-preview-list { grid-auto-columns:48px; gap:8px; }
#referencePreviewSection .reference-preview-open { width:48px; height:48px; padding:0; border-radius:6px; overflow:hidden; }
#referencePreviewSection .reference-preview-open img { width:100%; height:100%; object-fit:cover; border-radius:0; }
#referencePreviewSection .reference-preview-card > strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:9px; }
#copyEditorDialog { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 18px 64px #0003,0 2px 8px #0001; }
#copyEditorDialog > header { padding:13px 18px; background:var(--surface-subtle); }
#copyEditorDialog h2 { font-size:14px; letter-spacing:-.02em; }
#copyEditorDialog #basicCopyEditor { padding:16px 18px; }
#copyEditorDialog [data-copy-close] { border-radius:50%; width:26px; height:26px; background:color-mix(in srgb,var(--muted) 9%,transparent); }
.copy-layout-tabs { display:flex; flex-wrap:nowrap; gap:4px; padding:0; background:transparent; margin-bottom:10px; }
.copy-layout-tabs button { display:flex; flex:1; align-items:center; justify-content:center; gap:5px; min-width:0; border:1px solid var(--line); background:var(--surface-subtle); padding:7px 8px; font-size:11px; border-radius:7px; color:var(--text); }
.copy-layout-tabs button[aria-pressed="true"] { background:var(--accent-faint); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); box-shadow:none; }
.copy-layout-tabs .copy-layout-all { flex:0 0 auto; min-width:44px; }
.copy-layout-tabs button span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.copy-layout-tabs button:active { background:var(--surface-hover); }
.copy-layout-symbol { display:inline-flex; flex:0 0 auto; }
#copyEditorDialog .copy-layout-symbol svg { width:16px; height:16px; fill:none; stroke:currentColor; }
.copy-layout-canvas { border-color:color-mix(in srgb,var(--muted) 22%,transparent); border-radius:10px; box-shadow:0 1px 3px #00000008; margin-bottom:16px; }
#copyEditorDialog .copy-layout-subject svg { fill:currentColor; stroke:none; }
.copy-layout-subject { color:light-dark(#d4d8df,#535965); }
#copyEditorDialog .copy-layout-box { border-radius:6px; }
#copyEditorDialog .copy-layout-box:focus-within { outline:0; box-shadow:none; }
#copyEditorDialog .copy-layout-box textarea { outline:0; border-radius:5px; }
.copy-layout-toolbar { display:grid; grid-template-columns:max-content minmax(60px,100px) max-content 1fr max-content 30px; flex-wrap:nowrap; min-height:48px; box-sizing:border-box; overflow-x:auto; padding:8px; gap:8px; border:1px solid var(--line); border-radius:9px; background:var(--surface-subtle); margin-bottom:8px; }
.copy-layout-toolbar input[type="range"] { width:100%; min-width:0; }
.copy-layout-toolbar > * { flex-shrink:0; }
.copy-layout-toolbar > span { white-space:nowrap; }
.copy-layout-alignment { display:flex; gap:2px; padding:2px; border-radius:7px; background:color-mix(in srgb,var(--muted) 8%,transparent); }
.copy-layout-alignment button { display:grid; place-items:center; width:28px; height:28px; padding:5px; border:0; border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; }
.copy-layout-alignment button:not(:disabled):hover { background:var(--surface-hover); color:var(--text); }
.copy-layout-alignment button:active { background:var(--accent-faint); color:var(--accent); }
.copy-layout-colors[data-disabled="true"] { opacity:.4; pointer-events:none; }
.copy-layout-toolbar button:disabled { opacity:.4; cursor:default; }
.copy-layout-depth { flex-shrink:0; }
.copy-layout-depth button { white-space:nowrap; }
.copy-layout-depth { margin-inline-start:auto; border:0; background:color-mix(in srgb,var(--muted) 8%,transparent); }
.copy-layout-depth button { display:flex; align-items:center; gap:4px; min-height:28px; padding:4px 7px; }
.copy-layout-depth button[aria-pressed="true"] { background:var(--surface-raised); color:var(--accent); box-shadow:0 1px 3px #0001; }
.copy-layout-toolbar input[type="range"] { appearance:none; height:4px; border:0; border-radius:3px; background:color-mix(in srgb,var(--muted) 25%,transparent); }
.copy-layout-toolbar input[type="range"]::-webkit-slider-thumb { appearance:none; width:15px; height:15px; background:var(--surface-raised); border:1px solid var(--line); border-radius:50%; box-shadow:0 1px 3px #0003; }
.copy-layout-toolbar input[type="color"] { appearance:none; background:var(--surface-raised); border-radius:7px; padding:4px; }
.copy-layout-toolbar input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.copy-layout-toolbar input[type="color"]::-webkit-color-swatch { border:1px solid #0002; border-radius:4px; }
.copy-layout-help { font-size:11px; line-height:1.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.copy-layout-aspect { display:none; }
#copyEditorDialog .typography-layout-options { display:none; }
@container (max-width:640px) {
  .copy-layout-toolbar { grid-template-columns:max-content minmax(40px,1fr) max-content max-content; grid-template-rows:30px 30px; gap:6px 8px; }
  .copy-layout-toolbar > span { grid-area:1 / 1; max-width:60px; overflow:hidden; text-overflow:ellipsis; }
  .copy-layout-toolbar > input[type="range"] { grid-area:1 / 2; }
  .copy-layout-alignment { grid-area:1 / 3; }
  .copy-layout-remove { grid-area:1 / 4; justify-self:end; }
  .copy-layout-depth { grid-area:2 / 1 / 3 / 4; margin-inline-start:0; justify-self:start; }
  .copy-layout-depth button > span:not(.copy-layout-symbol) { display:none; }
  .copy-layout-depth button { justify-content:center; width:30px; padding:5px; }
  .copy-layout-colors { grid-area:2 / 4; width:max-content; justify-self:end; }
}
#copyEditorDialog .typography-layout-options { margin-top:12px; padding-top:12px; gap:8px 14px; }
#copyEditorDialog .typography-layout-options label { font-size:11px; color:var(--muted); }
#copyEditorDialog .typography-layout-options input { width:14px; height:14px; accent-color:var(--accent); }
@media (max-width:480px) { .copy-layout-depth { margin-inline-start:0; } .copy-layout-tabs button { gap:3px; padding-inline:5px; font-size:10px; } }
@media (pointer:coarse) { .copy-layout-resize { width:12px; height:12px; } .copy-layout-depth button { min-height:36px; } }
#candidateVariationControl[hidden] { display:none !important; }
.topbar-launch-card .task-history-card #taskDrawer .generation-job { padding:8px 34px 8px 2px; }
.topbar-launch-card .task-history-card #taskDrawer .generation-job-copy,
.topbar-launch-card .task-history-card #taskDrawer .generation-job-copy:has(.job-result-thumbnails) {
  display:grid; grid-template-columns:minmax(0,1fr); gap:3px 8px; align-items:center;
}
.topbar-launch-card .task-history-card #taskDrawer .generation-job-copy:has(.job-result-thumbnails) { grid-template-columns:auto minmax(0,1fr); }
.topbar-launch-card .task-history-card #taskDrawer .job-result-thumbnails { grid-column:1; grid-row:1 / span 2; max-width:84px; flex-wrap:nowrap; gap:3px; overflow-x:auto; }
.topbar-launch-card .task-history-card #taskDrawer .job-result-thumbnails .job-result-select,
.topbar-launch-card .task-history-card #taskDrawer .job-reference-thumbnail { flex:0 0 32px; width:32px; height:40px; min-height:0; margin:0; padding:1px; border-radius:5px; object-fit:contain; }
.topbar-launch-card .task-history-card #taskDrawer .job-status-copy { min-width:0; padding:0; }
.topbar-launch-card .task-history-card #taskDrawer .generation-job-copy:has(.job-result-thumbnails) > :is(.job-status-copy,.job-status-preview,.job-user-prompt) { grid-column:2; }
.topbar-launch-card .task-history-card #taskDrawer .generation-job-heading { flex-wrap:nowrap; gap:5px; min-width:0; overflow:hidden; white-space:nowrap; }
.topbar-launch-card .task-history-card #taskDrawer .job-state-badge { flex-shrink:0; font-size:11px; }
.topbar-launch-card .task-history-card #taskDrawer .job-history-time { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-launch-card .task-history-card #taskDrawer .job-history-duration { flex-shrink:0; }
.topbar-launch-card .task-history-card #taskDrawer .job-requested-model { display:none; }
.topbar-launch-card .task-history-card #taskDrawer .job-user-prompt { margin:0; font-size:11px; line-height:1.4; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.topbar-launch-card .task-history-card #taskDrawer .job-dismissible-notice { grid-column:1 / -1; }
.topbar-launch-card .task-history-card #taskDrawer .generation-job > :is(.job-history-remove,.job-generation-stop) { top:8px; }
#taskToolbar .task-current > [data-label].task-split-status {
  display:inline-flex; flex-wrap:wrap; gap:6px; padding:0; background:transparent;
}
#taskToolbar .task-split-status > span { padding:4px 8px; border-radius:7px; font-weight:500; }
#taskToolbar .task-split-status > .task-running-badge { color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
#taskToolbar .task-split-status > .task-queued-badge { color:var(--muted); background:color-mix(in srgb,var(--muted) 12%,transparent); }
/* The workspace navigation owns the single shared horizontal divider. */
.stage > :is(#historyPanel, #moodboardPanel) { border-top:0; }
#browserPanel .browser-demo-home { padding: 24px 16px; gap: 12px; align-items: stretch; }
#browserPanel #browserViewport:has(.browser-demo-home:not([hidden])) { min-height: 230px; }
.browser-home-demo { flex-shrink: 0; }
.browser-home-demo { width: 100%; display:flex; gap:12px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.browser-home-demo > svg { width:24px; height:24px; flex-shrink:0; fill:none; stroke:var(--muted); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#browserPanel .browser-home-demo strong { font-size: 14px; }
#browserPanel .browser-home-demo p { font-size:12px; margin-top:6px; }
.topbar-utility-actions #railStatus { pointer-events:none; cursor:default; }
.topbar-utility-actions .workspace-account-actions #railStatus,
.topbar-utility-actions .workspace-account-actions #railStatus .gpt-account-avatar { border:0; background:transparent; box-shadow:none; }
.topbar-utility-actions > #accountActionsTrigger { margin-inline-start:0; margin-block:0; align-self:center; flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:8px; height:34px; min-width:36px; padding:7px 11px; border:1px solid var(--line); border-radius:10px; background:var(--surface-subtle); color:var(--text); font:inherit; font-size:12px; font-weight:500; box-shadow:0 1px 2px rgba(0,0,0,.035); transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease; }
#accountActionsTrigger span { white-space:nowrap; }
.topbar-utility-actions > #accountActionsTrigger { width:34px; min-width:34px; padding:7px; border-radius:50%; color:var(--muted); }
#accountActionsTrigger svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#accountActionsTrigger[data-connection-state="ready"][data-connection-provider="app-server"] svg { color:var(--good-text); }
#accountActionsTrigger[data-connection-state="ready"][data-connection-provider="google"] svg { color:var(--accent); }
.topbar-utility-actions > #accountActionsTrigger:is(:hover,[aria-expanded="true"]) { background:var(--surface-hover); border-color:var(--line-strong); }
.topbar-utility-actions > #accountActionsTrigger:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.topbar-launch-heading:has(> .gpt-account-menu-drawer) { flex-wrap:wrap; row-gap:0; }
.gpt-account-menu-drawer { display:grid; grid-template-rows:0fr; flex:0 0 100%; min-width:0; visibility:hidden; opacity:0; transition:grid-template-rows 200ms var(--ease-out,ease-out),opacity 160ms ease-out,visibility 0s 200ms; }
.gpt-account-menu-drawer[data-open="true"] { grid-template-rows:1fr; visibility:visible; opacity:1; transition-delay:0s; }
.gpt-account-menu-clip { min-height:0; overflow:hidden; }
#gptAccountMenu { position:static; inset:auto; margin:12px 0 0; width:100%; max-width:none; max-height:none; overflow:visible; animation:none; transform:none; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
#gptAccountMenu .gpt-account-menu-header { display:flex; }
#gptAccountMenu .gpt-account-menu-header > strong { display:block; }
#gptAccountMenu .gpt-account-menu-action { text-align:start; }
@media(prefers-reduced-motion:reduce) { .topbar-utility-actions > #accountActionsTrigger { transition:none; } }
@media(prefers-reduced-motion:reduce) { .gpt-account-menu-drawer { transition:none; } }
.account-view { width:min(420px,calc(100vw - 32px)); padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--text); box-shadow:0 12px 40px rgba(0,0,0,.18); }
.account-view::backdrop { background:rgba(0,0,0,.35); }
.account-view header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.account-view button { font:inherit; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-subtle); color:var(--text); cursor:pointer; }
.account-view button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.account-view dl { display:grid; gap:8px; margin:20px 0 0; }
.account-view dt { color:var(--muted); font-size:12px; }
.account-view dd { margin:0 0 8px; overflow-wrap:anywhere; }
.account-view-admin { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; }
.account-view-admin[open] { display:flex; flex-direction:column; }
.account-view-admin header { flex:0 0 auto; padding:10px 20px; border-bottom:1px solid var(--line); }
.account-view-admin iframe { flex:1; width:100%; min-height:0; border:0; }
.account-details-inline { margin:4px 0 8px; padding:12px; border-top:1px solid var(--line); }
.account-details-inline dl { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; margin:0 0 12px; }
.account-details-inline dt { color:var(--muted); font-size:12px; }
.account-details-inline dd { margin:0 0 8px; overflow-wrap:anywhere; }
.account-details-inline > button { width:100%; text-align:start; border:1px solid var(--line); border-radius:8px; padding:8px 12px; color:var(--text); background:var(--surface-subtle); }
.account-details-inline > button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.preview-shortcut-hint { grid-column:1 / -1; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:5px; width:100%; padding:4px 8px; box-sizing:border-box; color:var(--muted); font-size:10px; }
.preview-shortcut-hint kbd { font:inherit; padding:1px 4px; border:1px solid var(--line); border-radius:4px; }
.preview-shortcut-hint span { margin-inline-end:9px; }
#historyPanel { grid-template-rows:auto minmax(0,1fr) auto auto; }
#historyPanel > :is(.gallery,.history-empty) { grid-row:2; grid-column:1; }
#historyPanel > .gallery-interaction-hint { grid-row:4; margin:6px 0 0; padding:4px 0 0; }
#historyPanel .history-copy { align-items:center; }
#historyPanel .history-header { justify-content:flex-start; }
#historyPanel .history-tools { justify-content:flex-start; margin-inline-start:0; }
#historyPanel > .gallery-selection-footer { grid-row:3; grid-column:1; display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; min-height:44px; box-sizing:border-box; margin-top:8px; padding:6px 4px 0; border-top:1px solid var(--line); }
#historyPanel .gallery-selection-footer > output { min-width:0; color:var(--muted); font-size:11px; font-weight:400; line-height:1.4; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#historyPanel .gallery-selection-footer > button { display:inline-flex; flex:none; align-items:center; justify-content:center; gap:6px; min-height:32px; margin-inline-start:auto; padding:5px 10px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--danger, #d94151); font:inherit; font-size:12px; line-height:1.4; white-space:nowrap; box-shadow:none; }
#historyPanel .gallery-selection-footer > button svg { width:15px; height:15px; flex:0 0 15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#historyPanel .gallery-selection-footer > button:disabled { color:var(--muted); opacity:.45; }
@media(hover:hover) { #historyPanel .gallery-selection-footer > button:not(:disabled):hover { background:color-mix(in srgb,var(--danger, #d94151) 8%,transparent); } }
@media(pointer:coarse) { #historyPanel .gallery-selection-footer > button { min-height:44px; padding-inline:12px; } }
#historyPanel .gallery-card:is(.is-selected,.is-deselecting)::after { content:none; background:none; box-shadow:none; animation:none; }
body #historyPanel .gallery-select:focus-visible,
body #createMoodboardDock .moodboard-select:focus-visible { outline:none; }
body #historyPanel .gallery-card:is(.is-previewing, :has(.gallery-select:focus-visible)),
body #createMoodboardDock #userImageLibrary .moodboard-card.is-previewing,
body #createMoodboardDock #userImageLibrary .moodboard-card:has(.moodboard-select:focus-visible),
body #createMoodboardDock .included-card-shell.is-previewing > .included-card,
body #createMoodboardDock .included-card:focus-visible {
  border-color:var(--line); outline:2px solid var(--accent); outline-offset:-2px;
  box-shadow:var(--photo-card-shadow);
}
body #createMoodboardDock #userImageLibrary .moodboard-card:is(.is-selected,.is-deselecting)::after { background:var(--photo-selection-wash,rgb(72 78 88 / 13%)); box-shadow:none; }
body #createMoodboardDock #userImageLibrary .moodboard-selection-check {
  top:8px; right:8px; left:auto; width:24px; height:24px; min-height:0; aspect-ratio:1;
  border:1.5px solid rgb(255 255 255 / 90%); background:rgb(255 255 255 / 16%); color:white;
  box-shadow:0 0 0 .5px rgb(0 0 0 / 18%), 0 1px 3px rgb(0 0 0 / 12%);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
body #createMoodboardDock #userImageLibrary .moodboard-selection-check svg {
  width:14px; height:14px; stroke-width:2.5; opacity:0;
}
body #createMoodboardDock #userImageLibrary .moodboard-selection-check[aria-checked="true"] {
  background:#007aff; border-color:rgb(255 255 255 / 95%); box-shadow:0 1px 3px rgb(0 0 0 / 16%);
}
body #createMoodboardDock #userImageLibrary .moodboard-selection-check[aria-checked="true"] svg { opacity:1; }
@media (hover:none), (pointer:coarse) {
  body #createMoodboardDock #userImageLibrary .moodboard-selection-check { width:36px; height:36px; }
}
.gallery-interaction-hint span { margin:0; }
.gallery-gesture-chip { padding:1px 4px; border:1px solid var(--line); border-radius:4px; }
#canvasPanel.is-editing-image .preview-shortcut-hint { display:none; }
.gallery-card.is-selected > .gallery-selection-check,
.gallery-card:focus-within > .gallery-selection-check { opacity:1; }
@media(hover:hover) { .gallery-card:hover > .gallery-selection-check { opacity:1; } }
.prompt-reference-guidance { display:flex; align-items:flex-start; gap:8px; width:100%; margin:4px 0 0; color:var(--muted); text-align:start; }
#promptField .prompt-footer { display:block; margin-top:8px; }
.prompt-reference-guidance > svg { flex:none; width:15px; height:15px; margin-top:2px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.prompt-reference-guidance strong { display:block; color:var(--text); font-size:11px; line-height:1.6; font-weight:500; }
.prompt-reference-guidance p { margin:2px 0 0; font-size:10px; line-height:1.6; overflow-wrap:anywhere; }
#promptField .prompt-footer[hidden] { display:none; }
#promptField .prompt-input-area { position:relative; }
#promptField .prompt-input-area .prompt-submit-shortcut { position:absolute; inset-inline-start:14px; bottom:7px; justify-content:flex-start; margin:0; max-width:calc(100% - 110px); font-size:9px; line-height:1.4; }
#promptField .prompt-input-area .prompt-submit-shortcut span { display:none; }
#promptField .prompt-input-area > .prompt-character-count { min-height:14px; }
#canvasPanel.is-preview-empty:not(#canvasSurface):not(#canvasImageLink) > .preview-shortcut-hint { display:none; }
@media(min-width:1100px) {
  body[data-active-view="create"] .stage > #canvasPanel:not(.has-contained-viewer) { grid-template-rows:minmax(0,1fr) auto auto; }
  body[data-active-view="create"] #canvasPanel:not(.has-contained-viewer) > .preview-shortcut-hint { grid-row:2; }
  body[data-active-view="create"] #canvasPanel:not(.has-contained-viewer) #previewNavigation { grid-row:3; }
}

/* Navigation and preview share the same inset from the workspace top. */
.stage { --workspace-content-top: 12px; }

/* Put navigation over the asset pane and give the preview the released top row. */
.stage #workspaceNav { justify-content: flex-end; direction: ltr; }
:root[dir="rtl"] #workspaceNav .workspace-tab { direction: rtl; }
@media (min-width: 1100px) {
  body[data-active-view="create"] .stage:not(.has-contained-preview):not(#canvasPanel) { direction: ltr; }
  :root[dir="rtl"] body[data-active-view="create"] .stage > :not(#workspaceNav) { direction: rtl; }
  body[data-active-view="create"] .stage:not(.has-contained-preview):not(#canvasPanel) > #workspaceNav {
    grid-column: 2; grid-row: 1; width: 100%;
  }
  body[data-active-view="create"] .stage > #canvasPanel:not(.has-contained-viewer) {
    grid-row: 1 / 5; align-self: stretch; margin-top: var(--workspace-content-top); margin-bottom: 12px; min-height: 0;
  }
  body[data-active-view="create"] #canvasPanel:not(.has-contained-viewer) #canvasSurface { height: auto; }
  body[data-active-view="create"] #workspaceNav .workspace-tab { flex: 1 1 0; gap: 4px; padding-inline: 4px; font-size: calc(11px + var(--app-font-increase, 1pt)); }
  body[data-active-view="create"] #workspaceNav .workspace-tab svg { width: 16px; height: 16px; flex-basis: 16px; }
  body[data-active-view="create"] #workspaceNav #workspace-tab-browser { flex-grow: 1.4; }
  body[data-active-view="create"] #workspaceNav #workspace-tab-history { flex-grow: .85; }
}

/* Archive replaces the image list while the same preview and split remain visible. */
#browserPanel .browser-sidebar-heading { justify-content: flex-end; }
body[data-active-view="history"] .stage > #canvasPanel { display: grid; }
@media (min-width: 1100px) {
  body[data-active-view="history"] .stage { direction: ltr; column-gap: 16px; grid-template-columns: minmax(0, 1fr) var(--workspace-assets-width, 280px); }
  body[data-active-view="history"] .stage > #workspaceNav { grid-column: 2; grid-row: 1; width: 100%; }
  body[data-active-view="history"] #workspaceNav .workspace-tab { flex: 1 1 0; gap: 4px; padding-inline: 4px; font-size: calc(11px + var(--app-font-increase, 1pt)); }
  body[data-active-view="history"] #workspaceNav .workspace-tab svg { width: 16px; height: 16px; flex-basis: 16px; }
  body[data-active-view="history"] #workspaceNav #workspace-tab-browser { flex-grow: 1.4; }
  body[data-active-view="history"] #workspaceNav #workspace-tab-history { flex-grow: .85; }
  body[data-active-view="history"] .stage > #canvasPanel {
    position: relative; grid-column: 1; grid-row: 1 / 5; align-self: stretch; margin: var(--workspace-content-top) 0 12px 16px; padding: 0;
    grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0; height: var(--create-preview-height, calc(100dvh - 200px)); box-sizing: border-box;
  }
  body[data-active-view="history"] #canvasPanel > .canvas-toolbar { position: absolute; top: 8px; right: 8px; z-index: 6; min-height: 0; padding: 0; max-width: calc(100% - 64px); }
  body[data-active-view="history"] #canvasPanel #canvasSurface { grid-row: 1; height: auto; padding-block: 0; border-radius: 14px; }
  body[data-active-view="history"] #canvasPanel > .preview-shortcut-hint { grid-row: 2; }
  body[data-active-view="history"] #canvasPanel #previewNavigation { grid-row: 3; }
  body[data-active-view="history"] .stage > #historyPanel { grid-column: 2; grid-row: 2 / 5; align-self: start; height: var(--create-preview-height, calc(100dvh - 200px)); box-sizing: border-box; margin: 8px 16px 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
  :root[dir="rtl"] .stage > :not(#workspaceNav) { direction: rtl; }
  #historyPanel .history-header { flex-wrap: wrap; gap: 8px; }
  #historyPanel .history-copy { flex-wrap: wrap; }
}
@media (max-width: 1099px) {
  body[data-active-view="history"] .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto max(760px, 85dvh) minmax(440px, 1fr); overflow-y: auto; }
  body[data-active-view="history"] .stage > #canvasPanel { grid-column: 1; grid-row: 2; }
  body[data-active-view="history"] .stage > #historyPanel { grid-column: 1; grid-row: 3; }
}

/* Native-style tabs align with the asset pane below, on one shared baseline. */
body .stage > #workspaceNav {
  display: flex;
  box-sizing: border-box; min-height: 36px; height: 36px; margin-top: var(--workspace-content-top); align-items: end; justify-content: flex-start; gap: 4px; padding: 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; container: workspace-navigation / inline-size;
}
body:is([data-active-view="create"], [data-active-view="history"]) .stage > #workspaceNav { padding: 0; }
@media (min-width: 1100px) {
  body[data-active-view="create"] .stage:not(.has-contained-preview):not(#canvasPanel) > #workspaceNav,
  body[data-active-view="history"] .stage > #workspaceNav { width: calc(100% - 16px); margin-left: 16px; }
}
body:is([data-active-view="create"], [data-active-view="history"]) .stage #workspaceNav .workspace-tab {
  box-sizing: border-box; flex: 0 1 auto; min-width: 0; min-height: 36px; height: 36px; margin: 0 0 -1px; padding: 3px 10px; gap: 6px; justify-content: center;
  border: 1px solid transparent; border-radius: 9px 9px 0 0; background: color-mix(in srgb, var(--muted) 5%, var(--workspace-panel));
  font-size: calc(11px + var(--app-font-increase, 1pt)); font-weight: 500; line-height: 20px;
  color: var(--muted); box-shadow: none; transition: background-color 140ms ease, color 140ms ease;
}
body:is([data-active-view="create"], [data-active-view="history"]) .stage #workspaceNav :is(#workspace-tab-browser, #workspace-tab-history) { flex-grow: 0; }
body .stage #workspaceNav .workspace-tab::after { display: none; }
body .stage #workspaceNav .workspace-tab.is-active {
  color: var(--accent); background: var(--workspace-content); font-weight: 600;
  border-color: var(--line); border-bottom-color: var(--workspace-content);
  box-shadow: none;
}
body .stage #workspaceNav .workspace-tab > span { white-space: normal; line-height: 14px; }
body .stage #workspaceNav .workspace-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
body .stage #workspaceNav .workspace-tab-group { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; width:max-content; max-width:100%; min-width:0; }
body:is([data-active-view="create"], [data-active-view="history"]) .stage #workspaceNav .workspace-tab-group > .workspace-tab { width:100%; text-align:center; justify-content:center; }
body .stage #workspaceNav .workspace-tab:active { background: var(--accent-faint); }
body .stage #workspaceNav .workspace-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@container workspace-navigation (max-width: 340px) {
  body:is([data-active-view="create"], [data-active-view="history"]) .stage #workspaceNav .workspace-tab { padding-inline: 6px; }
  body .stage #workspaceNav .workspace-tab svg { display: none; }
}

body #createSideRail #createMoodboardDock {
  padding: 12px; border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: 10px; background: var(--workspace-panel);
}
body #createMoodboardDock .moodboard-header {
  flex-wrap: nowrap; min-height: 36px; align-items: center; gap: 8px; padding: 4px 8px;
  box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--line) 45%, transparent); border-radius: 8px;
  background: transparent;
}
body #createMoodboardDock #createAssetTabs {
  flex: 0 1 220px; width: 220px; min-width: 0; max-width: 100%; align-self: center; align-items: center;
  box-sizing: border-box; min-height: 28px; gap: 2px; padding: 0; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: 6px;
  background: light-dark(rgb(210 214 222 / 72%), rgb(25 28 34 / 70%));
}
body #createMoodboardDock #createAssetTabs [role="tab"] {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 8px; row-gap: 0; flex: 1 1 0; min-width: 0; min-height: 26px; margin: 0; padding: 2px 8px;
  border: 0; border-radius: 5px; font-size: 12px; line-height: 12px;
  white-space: normal; overflow-wrap: anywhere; color: var(--muted); background: transparent; box-shadow: none;
}
body #createMoodboardDock #createAssetTabs .asset-source-description { font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--muted); }
body #createMoodboardDock #createAssetTabs [aria-selected="true"] {
  background: var(--workspace-content); color: var(--accent);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 35%, transparent), 0 1px 3px rgb(0 0 0 / 5%);
}
body #createMoodboardDock #createAssetUploadButton {
  flex: 0 0 auto; margin-inline-start: auto; min-height: 30px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--workspace-content); color: var(--text);
  font: inherit; font-size: 12px; line-height: 20px; box-shadow: 0 1px 2px rgb(0 0 0 / 4%); cursor: pointer;
}
body #createMoodboardDock:has(#createAssetUploadButton) :is(#builtinModelLibrary, #userImageLibrary) .included-upload { display: none; }
body #createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  min-height: 0; margin: 12px 0 10px; padding: 0 0 10px; border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  border-radius: 0; background: transparent; overflow: visible;
}
body #createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) button {
  display: block; min-width: 0; min-height: 30px; padding: 4px 6px; border: 1px solid transparent;
  border-radius: 7px; font-size: 12px; line-height: 20px; font-weight: 500; text-align: center;
  color: var(--muted); background: transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: none;
}
body #createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) button::before { display: inline-block; width: 14px; height: 14px; margin-inline-end: 5px; vertical-align: -2px; }
body #createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) button[aria-selected="true"] {
  color: var(--accent); background: var(--accent-faint);
  border-color: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: none; font-weight: 600;
}
body #createMoodboardDock :is(#userLibraryCategories, .included-category-tabs)[hidden],
body #createMoodboardDock.show-samples #userLibraryCategories { display: none; }
body #createMoodboardDock .builtin-model-content,
body #createMoodboardDock #userImageLibrary #moodboardGrid { padding: 0; }
body #createMoodboardDock :is(.included-section > header, #userImageLibrary .reference-library-section > header) { min-height: 20px; padding: 0 0 8px; margin: 0; }
body #createMoodboardDock :is(.included-section > header, #userImageLibrary .reference-library-section > header) > span {
  display: none;
  padding: 0; background: transparent; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums;
}
body #createMoodboardDock :is(.included-grid, .reference-library-row) { gap: 12px; }
body #createMoodboardDock :is(.included-card, #userImageLibrary .moodboard-card) {
  border-color: color-mix(in srgb, var(--line) 65%, transparent); border-radius: 10px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 3%);
}
body #createMoodboardDock .included-card .included-card-title,
body #createMoodboardDock #userImageLibrary .user-image-title {
  box-sizing: border-box; min-height: 34px; padding: 8px 10px; font-weight: 500; line-height: 18px;
}
body #createMoodboardDock > #assetSelectionBar {
  box-sizing: border-box; min-height: 40px; margin-top: 8px; padding: 8px 0 0; gap: 8px;
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); background: transparent; align-items: center;
}
body #createMoodboardDock #assetSelectionBar :is(button, #selectAllSamplesButton) { min-height: 28px; padding-block: 3px; }
body #createMoodboardDock :is(#createAssetTabs [role="tab"], .included-category-tabs button, #createAssetUploadButton):not(:focus-visible) { outline: none; }
body #createMoodboardDock :is(#createAssetTabs [role="tab"], .included-category-tabs button, #createAssetUploadButton):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A Finder-like source/sidebar/content hierarchy. The image viewport keeps its own scroll. */
.prompt-history-bar { display:block; min-width:0; margin:6px 0 0; }
.prompt-history-trigger { display:flex; align-items:center; gap:6px; width:100%; min-height:32px; padding:5px 8px; border:0; border-radius:7px; background:transparent; color:var(--muted); font:inherit; font-size:12px; text-align:start; }
.prompt-history-trigger svg { flex:none; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.prompt-history-trigger small { font:inherit; opacity:.7; }
.prompt-history-trigger .prompt-history-chevron { margin-inline-start:auto; transition:transform .15s ease; }
.prompt-history-trigger[aria-expanded="true"] .prompt-history-chevron { transform:rotate(180deg); }
.prompt-history-trigger:hover, .prompt-history-trigger[aria-expanded="true"] { background:var(--accent-faint); color:var(--accent); }
.prompt-history-trigger:active { opacity:.7; }
.prompt-history-panel { position:static; width:100%; min-width:0; margin:4px 0 0; padding:8px; box-sizing:border-box; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; color:var(--text); box-shadow:none; }
.prompt-history-panel[hidden] { display:none; }
.prompt-history-header { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; }
.prompt-history-clear { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:7px; background:transparent; color:var(--muted); }
.prompt-history-clear svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.prompt-history-clear:hover:not(:disabled) { background:var(--surface-subtle); color:var(--text); }
.prompt-history-clear:disabled { opacity:.4; }
.prompt-history-note { margin:6px 0 10px; color:var(--muted); font-size:11px; line-height:1.6; }
.prompt-history-list { display:grid; gap:4px; max-height:320px; overflow:auto; overscroll-behavior:contain; }
.prompt-history-list > p { margin:12px 0; color:var(--muted); font-size:12px; }
.prompt-history-row { display:flex; align-items:flex-start; gap:4px; min-width:0; border-radius:7px; }
.prompt-history-row:hover { background:var(--accent-faint); }
.prompt-history-restore { flex:1; min-width:0; padding:8px 6px; border:0; background:transparent; color:var(--text); font:inherit; font-size:12px; line-height:1.6; text-align:start; white-space:pre-wrap; overflow-wrap:anywhere; display:block; }
.prompt-history-remove { flex:0 0 30px; width:30px; height:30px; padding:0; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:20px; }
.prompt-history-remove:hover { background:var(--surface-subtle); color:var(--text); }
.prompt-history-panel button:focus-visible, .prompt-history-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .prompt-history-chevron { transition:none; } }
@media (pointer:coarse) { .prompt-history-trigger, .prompt-history-restore, .prompt-history-remove { min-height:44px; } .prompt-history-remove { flex-basis:44px; } }
/* Source tabs choose the library; categories wrap with the actual panel width. */
.library-category-select { display: none; }
body #createMoodboardDock #userImageLibrary,
body #createMoodboardDock.show-samples #builtinModelLibrary {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px 0; flex: 1 1 0; min-height: 0; min-width: 0; margin-top: 8px;
}
body #createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) {
  grid-column: 1; grid-row: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr; align-items: stretch; gap: 0; margin: 0;
  padding: 3px 4px; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 8px; background: transparent; overflow: visible;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  min-width: 0; min-height: 38px; scrollbar-width: thin; scrollbar-gutter: auto;
  overscroll-behavior-x: contain;
}
body #createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) button {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 5px; min-width: 0; min-height: 32px; padding: 5px 8px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-size: 12px; font-weight: 500;
  text-align: center; white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 18px;
  color: var(--muted); background: transparent; box-shadow: none;
}
body #createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) button[aria-selected="true"] {
  color: var(--accent); background: transparent; border-bottom-color: transparent;
  box-shadow: none; font-weight: 600;
}
body #createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) button::before {
  display: block; flex: 0 0 15px; width: 15px; height: 15px; margin: 0;
}
@container asset-panel (max-width: 720px) {
  body #createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
body #createMoodboardDock :is(.builtin-model-content, #userImageLibrary #moodboardGrid) {
  grid-column: 1; grid-row: 2; min-width: 0; min-height: 0; overflow-y: auto;
}
body #createMoodboardDock .included-status { grid-column: 1; grid-row: 3; }
body #createMoodboardDock .library-category-select { display: none; }
body #createMoodboardDock .library-category-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Keep native selection and keyboard semantics; style the browser's top-layer picker. */
@supports (appearance: base-select) {
  body #createMoodboardDock .library-category-select,
  body #createMoodboardDock .library-category-select::picker(select) { appearance: base-select; }
  body #createMoodboardDock .library-category-select {
    align-items: center; gap: 10px; min-height: 40px; padding: 9px 12px;
    border-color: color-mix(in srgb, var(--line) 75%, transparent); border-radius: 10px;
    background: var(--surface-raised); font-weight: 500; line-height: 1.5;
    box-shadow: 0 1px 2px rgb(0 0 0 / 3%); cursor: pointer;
  }
  body #createMoodboardDock .library-category-select:open {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  }
  body #createMoodboardDock .library-category-select::picker-icon {
    color: var(--muted); margin-inline-start: auto; font-size: 11px;
  }
  body #createMoodboardDock .library-category-select::picker(select) {
    margin-block: 6px; padding: 5px; box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 12px;
    background: var(--surface-raised); color: var(--text); font: inherit; font-size: 12px;
    max-block-size: min(360px, calc(100dvh - 24px)); overflow-y: auto;
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%), 0 2px 6px rgb(0 0 0 / 4%);
  }
  body #createMoodboardDock .library-category-select option {
    display: flex; align-items: center; gap: 10px; min-height: 36px;
    padding: 8px 10px; border: 0; border-radius: 7px; color: var(--text);
    background: transparent; font-weight: 400; line-height: 1.5;
    white-space: normal; overflow-wrap: anywhere; cursor: pointer;
  }
  body #createMoodboardDock .library-category-select option:checked {
    background: var(--accent-faint); color: var(--accent); font-weight: 500;
  }
  body #createMoodboardDock .library-category-select option:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised));
    outline: none;
  }
  body #createMoodboardDock .library-category-select option::checkmark {
    order: 1; margin-inline-start: auto; color: var(--accent);
  }
}
@media (pointer: coarse) {
  body #createMoodboardDock .library-category-select,
  body #createMoodboardDock .library-category-select option { min-height: 44px; }
}
@media (forced-colors: active) {
  body #createMoodboardDock .library-category-select { border-color: ButtonText; box-shadow: none; }
  body #createMoodboardDock .library-category-select::picker(select) { border-color: ButtonText; box-shadow: none; }
  body #createMoodboardDock .library-category-select option:checked { background: Highlight; color: HighlightText; }
  body #createMoodboardDock .library-category-select option::checkmark { color: inherit; }
}
body #createMoodboardDock :is(#userLibraryCategories,.included-category-tabs) button:is(.is-category-drop-target,.is-sample-drop-target),
body #createMoodboardDock .library-category-select:is(.is-category-drop-target,.is-sample-drop-target) {
  background:color-mix(in srgb,var(--accent) 16%,var(--surface-raised));
  color:var(--accent); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);
  transition:none;
}
body #createMoodboardDock #userLibraryCategories button.is-category-drop-target { flex-wrap:wrap; row-gap:2px; }
body #createMoodboardDock #userLibraryCategories button.is-category-drop-target::after {
  content:attr(data-drop-feedback); flex-basis:100%; padding-inline-start:21px; font-size:10px; font-weight:500;
}
@container asset-panel (max-width: 310px) {
  body #createMoodboardDock .moodboard-header { gap: 6px; }
  body #createMoodboardDock #createAssetTabs [role="tab"] { padding-inline: 5px; }
  body #createMoodboardDock #createAssetUploadButton { padding-inline: 6px; }
  body #createMoodboardDock :is(#userLibraryCategories, .included-category-tabs) button::before { display: none; }
}
@container asset-panel (max-width: 230px) {
  body #createMoodboardDock .moodboard-header { flex-wrap: wrap; }
}

/* One browser toolbar: navigation, address and close, followed by compact bookmarks. */
body #browserPanel .browser-controls {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 28px) minmax(0, 1fr) repeat(3, 28px);
  align-items: center; gap: 4px; padding: 6px 8px; background: var(--workspace-panel); border-bottom: 0;
}
body #browserPanel .browser-controls > :is(button, a),
body #browserPanel .browser-controls [data-browser-action],
body #browserPanel .browser-controls #browserSidebarClose { width: 28px; min-width: 0; height: 32px; min-height: 32px; margin: 0; padding: 5px; grid-row: 1; }
body #browserPanel .browser-controls #browserAddress { grid-column: 4; grid-row: 1; min-height: 32px; padding: 5px 8px; }
body #browserPanel .browser-controls > button[type="submit"] { grid-column: 5; grid-row: 1; }
body #browserPanel .browser-controls #browserExternal { grid-column: 6; grid-row: 1; }
body #browserPanel .browser-controls #browserSidebarClose { grid-column: 7; grid-row: 1; color: var(--muted); }
@container mini-browser (max-width: 380px) {
  body #browserPanel .browser-controls { grid-template-columns: repeat(3, 28px) minmax(0, 1fr) repeat(2, 28px); }
  body #browserPanel .browser-controls #browserExternal { grid-column: 5; grid-row: 1; }
  body #browserPanel .browser-controls #browserSidebarClose { grid-column: 6; grid-row: 1; }
  body #browserPanel .browser-controls #browserAddress { grid-column: 1 / 6; grid-row: 2; }
  body #browserPanel .browser-controls > button[type="submit"] { grid-column: 6; grid-row: 2; }
}
@media (hover: hover) and (pointer: fine) {
  body .stage #workspaceNav .workspace-tab:not(.is-active):hover,
  body #createMoodboardDock #createAssetTabs [role="tab"]:not([aria-selected="true"]):hover {
    color: var(--text); background: color-mix(in srgb, var(--muted) 5%, transparent);
  }
  body #createMoodboardDock #createAssetUploadButton:hover { color: var(--text); background: var(--surface-hover); }
}
@media (pointer: coarse) {
  body:is([data-active-view="create"], [data-active-view="history"]) .stage #workspaceNav .workspace-tab,
  body #createMoodboardDock :is(#createAssetTabs [role="tab"], .included-category-tabs button, #createAssetUploadButton),
  body #createMoodboardDock .library-category-select,
  body #createMoodboardDock #assetSelectionBar :is(button, #selectAllSamplesButton),
  body #browserPanel .browser-controls > :is(button, a),
  body #browserPanel .browser-controls :is([data-browser-action], #browserSidebarClose, #browserAddress) { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  body:is([data-active-view="create"], [data-active-view="history"]) .stage #workspaceNav .workspace-tab { transition: none; }
}
@media (prefers-contrast: more), (forced-colors: active) {
  body .stage #workspaceNav .workspace-tab.is-active,
  body #createMoodboardDock :is(#createAssetTabs [role="tab"], .included-category-tabs button)[aria-selected="true"] { border-color: currentColor; }
}

body #createMoodboardDock .library-category-select { display: none; }

/* Assets lead into the preview; widths remain attached to their semantic panes. */
@media (min-width: 1100px) {
  body:is([data-active-view="create"], [data-active-view="history"]) .app-shell { direction: ltr; }
  :root[dir="rtl"] body:is([data-active-view="create"], [data-active-view="history"]) .app-shell > :is(.app-topbar, .composer-panel) { direction: rtl; }
  :root[dir="rtl"] body[data-active-view="history"] .stage > :not(#workspaceNav) { direction: rtl; }
  body:is([data-active-view="create"], [data-active-view="history"]) .stage.has-width-controls:not(.has-contained-preview):not(#canvasPanel),
  body[data-active-view="create"] .stage.has-width-controls.browser-within-assets:not(.has-contained-preview):not(#canvasPanel) {
    grid-template-columns: var(--workspace-assets-width, 280px) minmax(0, 1fr);
  }
  body:is([data-active-view="create"], [data-active-view="history"]) .stage:not(.has-contained-preview):not(#canvasPanel) > #workspaceNav { grid-column: 1; }
  body:is([data-active-view="create"], [data-active-view="history"]) .stage > #canvasPanel:not(.has-contained-viewer) { grid-column: 2; margin-left: 0; margin-right: 16px; }
  body[data-active-view="create"] .stage > #createSideRail,
  body[data-active-view="history"] .stage > #historyPanel { grid-column: 1; margin-left: 16px; margin-right: 0; }
  body[data-active-view="create"] .stage.browser-within-assets > #createSideRail { margin-left: 16px; margin-right: 0; }
  body[data-active-view="create"].browser-sidebar-open .stage.browser-within-assets > :is(#browserPanel, #createSideRail) { left: 16px; right: auto; margin: 0; }
}

/* Every role uses the same numbered, left-aligned attachment boxes. */
body #generationReferences :is(.reference-attached-thumbnails,.reference-region-targets) { justify-content:flex-start; direction:ltr; gap:6px; padding:5px 3px; }
body #generationReferences .has-split-reference .reference-card-actions > .reference-role-region-actions { flex:1 1 100%; width:100%; margin-inline:0; }
body #generationReferences .has-split-reference .reference-role-region-actions > .reference-region-targets { flex:1 1 100%; }
body #generationReferences :is(.reference-attached-thumbnails > .reference-role-thumbnail,.reference-region-target) { position:relative; flex:0 0 42px; width:42px; height:auto; }
body #generationReferences :is(.reference-attached-thumbnails .reference-thumbnail-open,.reference-region-target-button) { position:relative; display:block; box-sizing:border-box; width:42px; height:42px; padding:2px; border:1px solid var(--line); border-radius:7px; background:var(--surface-raised); overflow:hidden; }
body #generationReferences :is(.reference-thumbnail-number,.reference-region-target-button > span) { position:absolute; bottom:1px; left:2px; font-size:9px; line-height:12px; padding:0 3px; border-radius:3px; background:var(--surface-raised); color:var(--text); }
body #generationReferences [data-reference-role="wardrobe"] .reference-region-target-remove { left:30px; right:auto; }
body #generationReferences [data-reference-role="wardrobe"] .reference-region-targets { flex-wrap:wrap; overflow:visible; }
body #generationReferences .reference-angle-toggle { flex:0 1 auto; min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.25; min-height:28px; padding:5px 7px; border:0; border-radius:7px; background:var(--surface-raised); color:var(--muted); font:inherit; font-size:11px; }
body #generationReferences .reference-angle-toggle[aria-pressed="true"] { background:transparent; color:var(--accent); }
body #generationReferences .reference-angle-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
/* Reserve the border in both states so switching references does not move text. */
body #generationReferences .reference-region-buttons > :is(.reference-pose-toggle, .reference-angle-toggle) { border:1px solid transparent; background:transparent; }
body #generationReferences .reference-region-buttons > :is(.reference-pose-toggle, .reference-angle-toggle)[aria-pressed="true"] { border-color:var(--accent); }

/* Edited archive results retain an unobstructed photo and a compact status label. */
.gallery-edited-label {
  display: block;
  max-width: 100%;
  padding: 2px 3px 3px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Align reference options and keep active states outlined without a fill. */
body #generationReferences :is(.reference-region-buttons, .background-color-picker.has-color-state) {
  align-items:center;
}
body #generationReferences :is(.reference-region-buttons > .reference-pose-toggle, .reference-region-buttons > .reference-angle-toggle, .background-color-state) {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:32px; box-sizing:border-box; padding:4px 8px;
  border:1px solid transparent; border-radius:7px; background:transparent;
  font:inherit; font-size:11px; line-height:1.25; color:var(--muted);
}
body #generationReferences :is(.reference-region-buttons > .reference-pose-toggle, .reference-region-buttons > .reference-angle-toggle, .background-color-state)[aria-pressed="true"] {
  border-color:var(--accent); color:var(--accent); background:transparent;
}
body #generationReferences .reference-card-actions .background-color-trigger {
  height:32px; min-height:32px; align-items:center;
}

/* One outer gutter, shared column spacing, and inset content on independent surfaces. */
body .stage #workspaceNav .workspace-tab > span { min-width:0; overflow-wrap:anywhere; }
body .stage > #workspaceNav { height:auto; }
body:is([data-active-view="create"], [data-active-view="history"]) .stage #workspaceNav .workspace-tab { height:auto; align-self:stretch; }
@media (min-width:1100px) {
  body:is([data-active-view="create"], [data-active-view="history"]) .stage:not(.has-contained-preview):not(#canvasPanel) {
    --workspace-content-top:12px;
    --workspace-panel-padding:12px;
    --workspace-column-gap:16px;
    --workspace-navigation-height:36px;
    --workspace-content-gap:8px;
    column-gap:var(--workspace-column-gap);
    grid-template-rows:auto minmax(0,1fr) 0 0;
    border:0; border-radius:0; background:transparent; overflow:clip;
  }
  body:is([data-active-view="create"], [data-active-view="history"]) .stage:not(.has-contained-preview):not(#canvasPanel)::before {
    content:""; grid-column:1; grid-row:1 / 5; z-index:-1; pointer-events:none; margin:0;
    border:1px solid var(--line); border-radius:14px; background:var(--workspace-panel);
  }
  body:is([data-active-view="create"], [data-active-view="history"]) .stage:not(.has-contained-preview):not(#canvasPanel) > #workspaceNav {
    width:calc(100% - var(--workspace-panel-padding) * 2);
    margin:var(--workspace-content-top) var(--workspace-panel-padding) 0;
    padding:0;
  }
  body:is([data-active-view="create"], [data-active-view="history"]) .stage > #canvasPanel:not(.has-contained-viewer) {
    margin:0; height:var(--create-preview-height,100%); align-self:stretch;
    border:1px solid var(--line); border-radius:14px; background:var(--workspace-panel);
    padding:var(--workspace-panel-padding); box-sizing:border-box;
  }
  body:is([data-active-view="create"], [data-active-view="history"]) #canvasPanel:not(.has-contained-viewer) #canvasSurface {
    border:0; border-radius:8px; background:transparent; box-shadow:none;
  }
  body[data-active-view="create"] .stage > #createSideRail,
  body[data-active-view="create"] .stage.browser-within-assets > #createSideRail,
  body[data-active-view="history"] .stage > #historyPanel {
    margin:var(--workspace-content-gap) 0 0; width:100%; min-height:0;
    height:calc(100% - var(--workspace-content-gap));
    box-sizing:border-box; align-self:start;
  }
  body #createSideRail #createMoodboardDock,
  body[data-active-view="history"] .stage > #historyPanel {
    padding:0 var(--workspace-panel-padding) var(--workspace-panel-padding);
    border:0; border-radius:0; background:transparent;
  }
  body #createMoodboardDock #builtinModelLibrary .included-section > header { min-height:0; padding:0; }
  body #createMoodboardDock #builtinModelLibrary .included-section > header:has(> .included-clear-selection:not([hidden])) { padding-bottom:8px; }
  body #createMoodboardDock .included-grid > .included-style-heading { margin-top:0; padding:8px 0 0; }
  body #createMoodboardDock .included-grid > .included-style-heading:first-child { padding-top:0; }
  body #canvasPanel:not(.has-contained-viewer) .generation-activity { background:transparent; }
  body #canvasPanel:not(.has-contained-viewer) .generation-activity :is(strong,small) { background:transparent; }
  body:is([data-active-view="create"], [data-active-view="history"]) :is(.topbar-launch-card,.composer-panel) { border-radius:14px; }
  body[data-active-view="create"].browser-sidebar-open .stage.browser-within-assets > #browserPanel {
    left:var(--workspace-panel-padding); right:auto;
    width:calc(var(--workspace-assets-total-width) - var(--workspace-panel-padding) * 2);
    height:calc((100% - var(--browser-sidebar-top,64px) - var(--workspace-panel-padding) - var(--workspace-content-gap)) / 2);
    border-color:color-mix(in srgb,var(--line) 65%,transparent); box-shadow:none;
  }
  body[data-active-view="create"].browser-sidebar-open .stage.browser-within-assets > #createSideRail {
    left:0; right:auto; width:var(--workspace-assets-total-width); margin:0;
    top:calc(var(--browser-sidebar-top,64px) + (100% - var(--browser-sidebar-top,64px) - var(--workspace-panel-padding) - var(--workspace-content-gap)) / 2 + var(--workspace-content-gap));
    bottom:0; height:calc((100% - var(--browser-sidebar-top,64px) - var(--workspace-panel-padding) - var(--workspace-content-gap)) / 2 + var(--workspace-panel-padding));
  }
}

/* Clear workspace tabs above distinct source controls and a quiet category bar. */
body:is([data-active-view="create"], [data-active-view="history"]) .stage > #workspaceNav {
  padding:4px 4px 0;
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  background:transparent;
}
body:is([data-active-view="create"], [data-active-view="history"]) .stage #workspaceNav .workspace-tab {
  background:transparent;
}
body:is([data-active-view="create"], [data-active-view="history"]) .stage #workspaceNav .workspace-tab.is-active {
  background:var(--workspace-content); border-color:var(--line); border-bottom-color:var(--workspace-content);
}
@media (forced-colors:active) {
  body:is([data-active-view="create"], [data-active-view="history"]) .stage > #workspaceNav,
  body #createMoodboardDock :is(.moodboard-header,#userLibraryCategories,.included-category-tabs) {
    background:Canvas; border-color:CanvasText; backdrop-filter:none; -webkit-backdrop-filter:none;
  }
}

/* The mini browser occupies the preview surface without moving the image library. */
body.browser-preview-open .stage > #browserPanel {
  position:absolute; inset:auto; z-index:40; margin:0; padding:0; max-height:none;
  box-sizing:border-box; border:1px solid var(--line); border-radius:14px;
  background:var(--workspace-panel); box-shadow:none; transform:none;
}
body.browser-preview-open .stage > #canvasPanel:not(.is-editing-image) {
  visibility:hidden; pointer-events:none;
}
body.browser-preview-open .stage:has(#imageEditWindow[open]) > #browserPanel {
  visibility:hidden; pointer-events:none;
}

/* Reserve scrolling space once and mirror it so reference cards stay centered. */
body .app-shell > .composer-panel { scrollbar-gutter:auto; }
body .composer-panel .composer-fields {
  margin-inline:0; padding-inline:10px; scrollbar-gutter:stable both-edges;
}

/* Selected workspace tabs use the same blue accent as the source tabs. */
body .stage #workspaceNav .workspace-tab { color: var(--text); }
body .stage #workspaceNav .workspace-tab.is-active,
body .stage #workspaceNav #workspace-tab-browser[aria-expanded="true"] { color: var(--accent); }
body:is([data-active-view="create"], [data-active-view="history"]) .stage #workspaceNav .workspace-tab > span { color: inherit; }

/* Archive tools share a quiet track; only keyboard focus uses a blue outline. */
body #historyPanel .gallery { --gallery-thumbnail-min: 192px; --gallery-gap: 12px; }
body #historyPanel .gallery[data-columns="9"] { --gallery-thumbnail-min: 128px; }
body #historyPanel .gallery[data-columns="3"] { --gallery-thumbnail-min: 280px; }
body #historyPanel .gallery-date-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--gallery-thumbnail-min)), 1fr));
}
body #historyPanel .gallery-resolution { white-space: nowrap; overflow-wrap: normal; }

body #historyPanel .history-header,
body #historyPanel .history-copy { gap: 8px; }
body #historyPanel .history-header { flex-direction: row; align-items: center; }
body #historyPanel .history-tools { width: auto; }
body #historyPanel .gallery-density-buttons {
  gap: 2px;
  padding: 2px;
  border: 0;
  border-radius: 10px;
  background: var(--workspace-heading);
}
body #historyPanel .history-header :is(.gallery-density-button, .library-compare-toggle) {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 7px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
body #historyPanel .history-header :is(.gallery-density-button, .library-compare-toggle) svg {
  width: 16px;
  height: 16px;
}
@media (hover: hover) and (pointer: fine) {
  body #historyPanel .history-header :is(.gallery-density-button, .library-compare-toggle):not(:disabled):hover {
    border-color: transparent;
    background: var(--surface-hover);
    color: var(--text);
  }
}
body #historyPanel .history-header .gallery-density-buttons .gallery-density-button[aria-pressed="true"] {
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--accent);
}
body #historyPanel .history-header :is(.gallery-density-button, .library-compare-toggle):focus:not(:focus-visible) {
  outline: none;
}
@media (pointer: coarse) {
  body #historyPanel .history-header :is(.gallery-density-button, .library-compare-toggle) {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}
@media (forced-colors: active) {
  body #historyPanel .history-header .gallery-density-buttons .gallery-density-button[aria-pressed="true"] {
    border-color: Highlight;
    color: Highlight;
  }
}

/* Web reference browsing uses real browser tabs and the existing upload inputs. */
#browserPanel .browser-web-help { box-sizing:border-box; display:flex; flex-direction:column; gap:14px; max-width:560px; padding:24px; color:var(--text); }
#browserPanel .browser-web-help strong { font-size:14px; font-weight:600; line-height:1.5; }
#browserPanel .browser-web-help p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; overflow-wrap:anywhere; }
#browserPanel .browser-web-actions { display:flex; flex-wrap:wrap; gap:8px; }
#browserPanel .browser-web-actions .compact-button { min-height:36px; height:auto; padding:8px 12px; text-align:center; white-space:normal; line-height:1.4; }
#browserPanel #browserViewport { overflow:auto; }
@media (max-width:600px) { #browserPanel .browser-web-help { padding:16px; } }

/* Pricing and payments reuse the existing account dialog surfaces and focus treatment. */
.account-view.billing-view { box-sizing:border-box; width:min(880px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:20px; overflow:hidden; }
.account-view.billing-view[open] { display:flex; flex-direction:column; }
.billing-view > header { flex:0 0 auto; padding-bottom:16px; border-bottom:1px solid var(--line); }
.billing-view > header strong { font-size:15px; overflow-wrap:anywhere; }
.billing-view > header button { flex-shrink:0; }
.billing-view-body { min-height:0; overflow:auto; padding-top:16px; font-size:13px; line-height:1.6; }
.billing-view-body h2 { margin:24px 0 12px; font-size:14px; font-weight:600; }
.billing-view-body h3 { margin:0 0 12px; font-size:14px; font-weight:600; }
.billing-view-body p { margin:8px 0; overflow-wrap:anywhere; }
.billing-view .billing-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0 14px; }
.billing-view .billing-plan-card { padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--surface-subtle); }
.billing-view .billing-plan-price { font-size:18px; font-weight:600; color:var(--text); }
.billing-view .billing-plan-card > button { width:100%; margin-top:12px; }
.billing-view .billing-plan-current { display:block; margin-top:12px; color:var(--accent); font-weight:600; }
.billing-view .billing-muted { color:var(--muted); font-size:12px; }
.billing-view .billing-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.billing-view button:disabled { opacity:.45; cursor:default; }
.billing-view .billing-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.billing-view .billing-actions button { white-space:normal; text-align:start; }
.billing-view a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.billing-view a:focus-visible,.billing-view input:focus-visible,.billing-view summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.billing-view dl { grid-template-columns:minmax(100px,.4fr) minmax(0,1fr); align-items:baseline; gap:8px 16px; }
.billing-view dd { margin:0; }
.billing-view .billing-notice { padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-subtle); }
.billing-view .billing-notice a { display:block; margin-top:8px; }
.billing-view .billing-order-list { display:grid; gap:12px; }
.billing-view .billing-order { padding:14px; border:1px solid var(--line); border-radius:10px; }
.billing-view .billing-order p { margin-top:4px; }
.billing-view .billing-terms { margin:16px 0 10px; border-top:1px solid var(--line); padding-top:12px; }
.billing-view .billing-terms summary { cursor:pointer; color:var(--accent); }
.billing-view .billing-terms p { white-space:pre-wrap; }
.billing-view .billing-consent { display:flex; align-items:flex-start; gap:8px; margin:12px 0; cursor:pointer; }
.billing-view .billing-consent input { margin:4px 0 0; flex:0 0 auto; accent-color:var(--accent); }
.billing-view .billing-confirmation { margin-top:20px; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--surface-subtle); }
@media (max-width:650px) {
  .account-view.billing-view { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); padding:14px; }
  .billing-view .billing-plan-grid { grid-template-columns:minmax(0,1fr); gap:10px; }
  .billing-view > header { gap:10px; align-items:flex-start; }
  .billing-view > header button { max-width:55%; white-space:normal; }
  .billing-view dl { grid-template-columns:minmax(0,1fr); gap:3px; }
  .billing-view dd { margin-bottom:8px; }
}