/* Original AI assistance UI. Layout only: no controls, states or APIs removed.
 * The four local Guide modules remain distinct from paid image assistance.
 * Use the workbench's actual semantic tokens, not a parallel brand palette. */
.mode-page[data-page='painting'] .painting-ai-panel {
  --painting-ai-title-size: 15px;
  --painting-ai-body-size: 13px;
  --painting-ai-caption-size: 12px;
  padding-bottom: 0;
}
.mode-page[data-page='painting'] #paintingAiStagePanel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  container-type: inline-size;
  container-name: painting-ai-panel;
}
.mode-page[data-page='painting'] #paintingAiStagePanel[hidden] { display: none; }
.mode-page[data-page='painting'] #paintingAiStagePanel > * {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
.mode-page[data-page='painting'] #paintingAiStagePanel > :is(textarea, .painting-ai-run) { width: 100%; }
.mode-page[data-page='painting'] .painting-ai-stage-head {
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--painting-line);
  border-inline-start: 3px solid var(--painting-accent);
  background: var(--painting-accent-pale);
}
.mode-page[data-page='painting'] :is(.painting-ai-stage-head strong, .painting-ai-panel .painting-panel-head > span > strong) {
  color: var(--painting-text-strong);
  font-size: var(--painting-ai-title-size);
  font-weight: 650;
  text-align: start;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.mode-page[data-page='painting'] .painting-ai-panel :is(.painting-ai-stage-head small, .painting-ai-stage-options small, .painting-ai-context-note, .painting-ai-manual-status small, .painting-panel-head > span > small) {
  font-size: var(--painting-ai-caption-size);
  line-height: 1.6;
  color: var(--painting-text-muted);
  overflow-wrap: anywhere;
  white-space: normal;
}
.mode-page[data-page='painting'] .painting-ai-stage-options {
  gap: 12px;
  min-width: 0;
}
.mode-page[data-page='painting'] .painting-ai-panel :is(label, .painting-ai-scope, .painting-ai-context-note, .painting-ai-manual-status) {
  min-width: 0;
  box-sizing: border-box;
  font-size: var(--painting-ai-body-size);
  line-height: 1.5;
}
.mode-page[data-page='painting'] .painting-ai-stage-options label > span {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--painting-text-body);
}
.mode-page[data-page='painting'] .painting-ai-stage-options label > span > b { font-variant-numeric: tabular-nums; }
.mode-page[data-page='painting'] .painting-ai-scope { flex-wrap: wrap; gap: 8px; }
.mode-page[data-page='painting'] .painting-ai-scope > span { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; }
.mode-page[data-page='painting'] .painting-ai-panel :is(select, textarea, button:not(.painting-float-toggle)) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  font-size: var(--painting-ai-body-size);
}
.mode-page[data-page='painting'] .painting-ai-panel :is(select, button:not(.painting-float-toggle)) { min-height: 40px; }
.mode-page[data-page='painting'] .painting-ai-panel :is(select, textarea) {
  width: 100%;
  border: 1px solid var(--painting-line);
  border-radius: var(--radius-sm, 6px);
  background: var(--painting-surface-raised);
  color: var(--painting-text-body);
  font-family: inherit;
}
.mode-page[data-page='painting'] .painting-ai-panel :is(select, textarea, button, summary):focus-visible {
  outline: 2px solid var(--painting-accent);
  outline-offset: 2px;
}
.mode-page[data-page='painting'] .painting-ai-panel select { height: auto; padding: 9px; }
.mode-page[data-page='painting'] .painting-ai-panel .painting-ai-prompt-field { display: grid; gap: 6px; }
.mode-page[data-page='painting'] .painting-ai-panel .painting-ai-prompt-field > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; color: var(--painting-text-body); }
.mode-page[data-page='painting'] .painting-ai-panel .painting-ai-prompt-field small { color: var(--painting-text-muted); font-size: var(--painting-ai-caption-size); }
.mode-page[data-page='painting'] .painting-ai-panel textarea {
  min-height: 104px;
  padding: 12px;
  line-height: 1.6;
  text-align: start;
  resize: vertical;
}
.mode-page[data-page='painting'] .painting-ai-panel button:not(.painting-float-toggle) {
  height: auto;
  padding: 9px 12px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  touch-action: manipulation;
}
.mode-page[data-page='painting'] .painting-ai-panel .painting-ai-run {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 650;
}
.mode-page[data-page='painting'] .painting-ai-panel:not(.is-collapsed) .painting-panel-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px;
}
.mode-page[data-page='painting'] .painting-ai-panel:not(.is-collapsed) .painting-panel-head > span { flex: 1 1 180px; min-width: 0; }
.mode-page[data-page='painting'] .painting-ai-panel .painting-panel-head > span { text-align: start; }
.mode-page[data-page='painting'] .painting-ai-stage-head { text-align: start; }
.mode-page[data-page='painting'] .painting-ai-panel .painting-ai-panel-actions { display: flex; align-items: center; gap: 8px; max-width: 100%; }
.mode-page[data-page='painting'] .painting-ai-panel .painting-ai-panel-actions i { font-size: 12px; font-style: normal; line-height: 1.5; color: var(--painting-text-muted); }
.mode-page[data-page='painting'] .painting-ai-panel .painting-ai-panel-actions .painting-float-toggle {
  width: auto;
  min-width: 84px;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--painting-accent, #6756e8);
  color: var(--painting-accent-deep, #4732c8);
  background: var(--painting-accent-pale, #f1eeff);
  font-weight: 700;
}
.mode-page[data-page='painting'] .painting-ai-panel .painting-ai-panel-actions .painting-float-toggle > span { font-size: 12px; line-height: 1.4; }
.mode-page[data-page='painting'] .painting-ai-panel .painting-ai-model-select { display: grid; gap: 6px; }
.mode-page[data-page='painting'] .painting-ai-panel .painting-ai-model-select > span { color: var(--painting-text-body); font-size: var(--painting-ai-body-size); }
.mode-page[data-page='painting'] .painting-ai-panel .painting-ai-model-select select { width: 100%; }
.mode-page[data-page='painting'] .painting-ai-panel .painting-asset-library-entry { border: 1px solid var(--painting-line); border-radius: var(--radius-md, 10px); background: var(--painting-surface, #fff); }
.mode-page[data-page='painting'] .painting-ai-panel .painting-asset-library-entry summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; cursor: pointer; }
.mode-page[data-page='painting'] .painting-ai-panel .painting-asset-library-entry summary > span { display: grid; gap: 4px; min-width: 0; }
.mode-page[data-page='painting'] .painting-ai-panel .painting-asset-library-entry summary strong { color: var(--painting-text-strong); font-size: 13px; font-weight: 600; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.mode-page[data-page='painting'] .painting-ai-panel .painting-asset-library-entry summary small { color: var(--painting-text-muted); font-size: 12px; line-height: 1.5; }
.mode-page[data-page='painting'] .painting-ai-panel .painting-asset-library-entry > div { padding: 0 10px 10px; }
.mode-page[data-page='painting'] .painting-ai-panel .painting-asset-library-entry p { color: var(--painting-text-body); font-size: 12px; line-height: 1.6; }
.mode-page[data-page='painting'] .painting-ai-run > span { flex: 0 0 auto; }
.mode-page[data-page='painting'] .painting-ai-inline { grid-template-columns: repeat(auto-fit, minmax(min(116px, 100%), 1fr)); gap: 8px; }
.mode-page[data-page='painting'] .painting-ai-error { gap: 6px; padding: 12px; }
.mode-page[data-page='painting'] .painting-ai-error :is(strong, span, small) { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.mode-page[data-page='painting'] .painting-ai-error > strong { font-size: 14px; }
.mode-page[data-page='painting'] .painting-ai-error > span { font-size: var(--painting-ai-body-size); line-height: 1.5; }
.mode-page[data-page='painting'] .painting-ai-error > small { font-size: var(--painting-ai-caption-size); line-height: 1.5; }
.mode-page[data-page='painting'] :is(.painting-ai-float, .painting-stage-float) :is(.painting-panel-head, .painting-floating-head) > strong { min-width: 0; overflow-wrap: anywhere; }
.mode-page[data-page='painting'] .painting-stage-flow button > span { min-width: 0; }
.mode-page[data-page='painting'] .painting-stage-flow button strong { font-size: 13px; line-height: 1.35; }
.mode-page[data-page='painting'] .painting-stage-flow button small { font-size: 12px; line-height: 1.45; }
@container painting-ai-panel (max-width: 260px) {
  .mode-page[data-page='painting'] .painting-ai-panel .painting-base-color-methods { grid-template-columns: 1fr; }
  .mode-page[data-page='painting'] .painting-ai-panel .painting-base-color-methods button { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: start; }
  .mode-page[data-page='painting'] .painting-ai-panel .painting-base-color-methods button :is(strong, small) { min-width: 0; white-space: normal; }
}
@media (pointer: coarse), (max-width: 980px) {
  .mode-page[data-page='painting'] .painting-ai-panel :is(select, button, summary) { min-height: 44px; }
  .mode-page[data-page='painting'] .painting-ai-panel .painting-ai-panel-actions .painting-float-toggle { min-height: 44px; }
  .mode-page[data-page='painting'] .painting-ai-panel :is(select, textarea, input:not([type='range']):not([type='checkbox'])) { font-size: 16px; }
  .mode-page[data-page='painting'] .painting-ai-panel summary { box-sizing: border-box; display: flex; align-items: center; }
  /* Keep all drawer commands available without covering editable forms. The
   * closed drawers use horizontal thumb targets in the canvas's lower margin. */
  .mode-page[data-page='painting'] .painting-app[data-compact-layout='true']:not([data-focus-left-open='true']):not([data-focus-right-open='true']) .painting-focus-edge {
    top: auto !important;
    bottom: calc(var(--painting-keyboard-inset, 0px) + max(52px, env(safe-area-inset-bottom, 0px))) !important;
    transform: none !important;
    min-height: 44px !important;
    width: auto !important;
    min-width: 76px !important;
    writing-mode: horizontal-tb;
    flex-direction: row;
    padding: 6px 8px;
  }
  .mode-page[data-page='painting'] .painting-app:has(.jtc-guide-workspace:not([hidden])) .painting-focus-edge { z-index: 190 !important; }
}