/* AI 领航仅属于 AI 绘画页。宿主脱离绘画三列布局，悬浮窗复用工作台的浅灰、淡紫视觉语言。 */
.painting-ai-navigator-host {
  position: absolute;
  inset: 0;
  z-index: 260;
  pointer-events: none;
}
.painting-ai-navigator-host > #paintingGuideEntryHost { display: none !important; }
.painting-ai-navigator {
  position: fixed;
  z-index: 261;
  top: 120px;
  right: clamp(18px, 3vw, 36px);
  width: min(360px, calc(100vw - 32px));
  color: #29324a;
  font-family: inherit;
  pointer-events: auto;
}
.painting-ai-navigator *, .painting-ai-navigator *::before, .painting-ai-navigator *::after { box-sizing: border-box; }
.painting-ai-navigator-launcher,
.painting-ai-navigator-panel button,
.painting-ai-navigator-panel select {
  min-height: 36px;
  border: 1px solid #d9deef;
  border-radius: 9px;
  background: #fff;
  color: #29324a;
  font: inherit;
  cursor: pointer;
}
.painting-ai-navigator-launcher {
  float: right;
  padding: 8px 16px;
  border-color: #d8d2ff;
  background: #f4f2ff;
  color: #5d50d8;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(91, 78, 214, .12);
}
.painting-ai-navigator-launcher[hidden], .painting-ai-navigator-panel[hidden] { display: none; }
.painting-ai-navigator-panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 144px);
  overflow: visible;
  border: 1px solid #d8ddef;
  border-radius: 16px;
  background: #fcfdff;
  box-shadow: 0 18px 45px rgba(42, 50, 83, .18);
}
.painting-ai-navigator-result {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(100% + 10px);
  width: min(792px, 62vw);
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dfe4f2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(38, 48, 75, .18);
  animation: painting-ai-navigator-result-in .22s ease-out both;
}
.painting-ai-navigator-result > header,
.painting-ai-navigator-result > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.painting-ai-navigator-result > header { color: #273149; font-size: 13px; }
.painting-ai-navigator-result > header span { color: #747e98; font-size: 11px; }
.painting-ai-navigator-result-stage { min-height: 180px; display: grid; place-items: center; overflow: hidden; border: 1px solid #e6e9f2; border-radius: 11px; background: repeating-conic-gradient(#f0f2f8 0 25%, #fff 0 50%) 50% / 18px 18px; }
.painting-ai-navigator-result-stage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.painting-ai-navigator-result > footer button { width: 100%; min-height: 36px; background: #7160f6; color: #fff; border-color: #7160f6; }
.painting-ai-navigator-result > footer small { color: #7a849d; line-height: 1.45; }
@keyframes painting-ai-navigator-result-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
.painting-ai-navigator-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid #e7eaf4;
  background: #f8f9ff;
  user-select: none;
  touch-action: none;
  cursor: move;
}
.painting-ai-navigator-head strong { font-size: 18px; line-height: 1; letter-spacing: -.03em; font-weight: 750; }
.painting-ai-navigator-head button { min-width: 38px; min-height: 34px; padding: 4px 10px; font-size: 12px; font-weight: 650; }
.painting-ai-navigator-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 14px 16px 0;
  padding: 4px;
  border-radius: 10px;
  background: #eff1f8;
}
.painting-ai-navigator-tab {
  min-height: 36px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #6b748b !important;
  font-size: 13px;
  font-weight: 700;
}
.painting-ai-navigator-tab[aria-selected='true'] {
  border: 1px solid #ddd8ff !important;
  background: #fff !important;
  color: #6354dc !important;
  box-shadow: 0 2px 7px rgba(74, 65, 164, .08);
}
.painting-ai-navigator-stage {
  display: grid;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 18px 18px;
}
.painting-ai-navigator-stage > label { display: grid; gap: 8px; }
.painting-ai-navigator-stage > label > span,
.painting-ai-navigator-range > span { font-size: 12px; font-weight: 650; color: #4f5a73; }
.painting-ai-navigator-stage select { width: 100%; min-height: 39px; padding: 7px 10px; font-size: 13px; }
.painting-ai-navigator-range { display: grid; gap: 8px; }
.painting-ai-navigator-range > span { display: flex; justify-content: space-between; align-items: center; }
.painting-ai-navigator-range output { color: #69738c; font-size: 12px; }
.painting-ai-navigator-range input[type='range'] { width: 100%; accent-color: #7160f6; }
.painting-ai-navigator-generate {
  width: 100%;
  min-height: 43px !important;
  margin-top: 4px;
  border-color: #6c5cf7 !important;
  background: #6c5cf7 !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
}
.painting-ai-navigator-generate:disabled { opacity: .55; cursor: wait; }
.painting-ai-navigator-reference-row { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; }
.painting-ai-navigator-reference { display: grid; place-items: center; width: 64px; min-height: 58px !important; padding: 0 !important; border-radius: 9px !important; font-size: 25px; }
.painting-ai-navigator-reference-image { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.painting-ai-navigator-color { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.painting-ai-navigator-color input[type='color'] { width: 100%; height: 40px; padding: 4px; border: 1px solid #d9deef; border-radius: 9px; background: #fff; cursor: pointer; }
.painting-ai-navigator-color input[type='color']::-webkit-color-swatch-wrapper { padding: 0; }
.painting-ai-navigator-color input[type='color']::-webkit-color-swatch { border: 0; border-radius: 5px; }
.painting-ai-navigator-add-light { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; font-size: 13px; font-weight: 650; }
.painting-ai-navigator-add-light b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #7160f6; color: #fff; font-size: 17px; line-height: 1; }
.painting-ai-navigator-feedback, .painting-ai-navigator-permission { margin: 0; color: #b5485a; font-size: 12px; line-height: 1.5; }
.painting-ai-navigator-footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px 14px; border-top: 1px solid #e7eaf4; background: #f7f8fd; }
.painting-ai-navigator-footer button { min-height: 36px !important; padding: 6px 8px; border-radius: 8px !important; background: #fff !important; color: #59627b !important; font-size: 12px; font-weight: 650; white-space: nowrap; }
.painting-ai-navigator-panel :is(button, select, input):focus-visible, .painting-ai-navigator-launcher:focus-visible { outline: 3px solid rgba(113, 96, 246, .28); outline-offset: 2px; }
.painting-ai-navigator-panel :is(button, select, input):disabled { opacity: .45; cursor: not-allowed; }
.painting-ai-navigator.is-dragging { opacity: .94; user-select: none; }
.mode-page[data-page='painting'] :is(.painting-reference-board, .painting-lighting-studio) { z-index: 280; }
@media (max-width: 640px) {
  .painting-ai-navigator { top: 72px; right: 12px; width: min(360px, calc(100vw - 24px)); }
  .painting-ai-navigator-panel { max-height: calc(100dvh - 90px); }
  .painting-ai-navigator-result { position: fixed; inset: 72px 12px auto; width: auto; min-height: 260px; max-height: calc(100dvh - 90px); }
}
@media (prefers-reduced-motion: reduce) { .painting-ai-navigator { transition: none; } }
/* 旧版桌宠样式已由 v3 统一接管。 */
/* 桌宠 v3：绘画页内的独立召唤层，宿主透明且不拦截画布。 */
.painting-ai-assistant-pet-root { position: fixed; z-index: 320; width: 96px; height: 96px; left: auto; top: auto; right: auto; bottom: auto; pointer-events: none; user-select: none; transition: left .22s cubic-bezier(.22,.85,.32,1), top .22s cubic-bezier(.22,.85,.32,1); }
.painting-ai-assistant-pet-root[hidden] { display: none !important; }
.painting-ai-assistant-pet-avatar { position: relative; display: grid; place-items: center; width: 96px; height: 96px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: grab; pointer-events: auto; touch-action: none; filter: drop-shadow(0 12px 20px rgba(35,65,126,.25)); animation: painting-ai-assistant-pet-float 5.8s ease-in-out infinite; }
.painting-ai-assistant-pet-avatar:active, .painting-ai-assistant-pet-root.is-dragging .painting-ai-assistant-pet-avatar { cursor: grabbing; }
.painting-ai-assistant-pet-root.is-dragging, .painting-ai-assistant-pet-root.is-dragging .painting-ai-assistant-pet-avatar { transition: none; animation-play-state: paused; }
.painting-ai-assistant-pet-art { display: block; width: 88px; height: 88px; overflow: visible; }
.painting-ai-assistant-pet-body { transform-box: fill-box; transform-origin: center; animation: painting-ai-assistant-pet-breathe 4.8s cubic-bezier(.37,0,.2,1) infinite; will-change: transform; }
.painting-ai-assistant-pet-eye-wrap { transform-box: fill-box; transform-origin: center; transform: translate(var(--gaze-x, 0px), var(--gaze-y, 0px)); transition: transform .34s cubic-bezier(.22,.85,.32,1); }
.painting-ai-assistant-pet-eye { transform-box: fill-box; transform-origin: center; animation: painting-ai-assistant-pet-blink 5.6s ease-in-out infinite; will-change: transform; }
.painting-ai-assistant-pet-eye-wrap-right .painting-ai-assistant-pet-eye { animation-delay: .12s; }
.painting-ai-assistant-pet-root[data-mood="thinking"] .painting-ai-assistant-pet-body { animation: painting-ai-assistant-pet-think 1.8s ease-in-out infinite; }
.painting-ai-assistant-pet-root[data-mood="thinking"] .painting-ai-assistant-pet-eye-wrap-left { --gaze-x: -1.3px; --gaze-y: -1.6px; }
.painting-ai-assistant-pet-root[data-mood="thinking"] .painting-ai-assistant-pet-eye-wrap-right { --gaze-x: -1.3px; --gaze-y: -1.6px; }
.painting-ai-assistant-pet-root[data-mood="curious"] .painting-ai-assistant-pet-body { animation: painting-ai-assistant-pet-curious 2.4s ease-in-out infinite; }
.painting-ai-assistant-pet-root[data-mood="curious"] .painting-ai-assistant-pet-eye-wrap-left { transform: translate(var(--gaze-x, 0px), var(--gaze-y, 0px)) scale(1.08); }
.painting-ai-assistant-pet-root[data-mood="curious"] .painting-ai-assistant-pet-eye-wrap-right { transform: translate(var(--gaze-x, 0px), var(--gaze-y, 0px)) scale(.92); }
.painting-ai-assistant-pet-root[data-mood="error"] .painting-ai-assistant-pet-eye { animation: painting-ai-assistant-pet-sad-blink 4.2s ease-in-out infinite; }
.painting-ai-assistant-pet-root[data-mood="happy"] .painting-ai-assistant-pet-body { animation: painting-ai-assistant-pet-happy 3.6s cubic-bezier(.34,1.56,.64,1) infinite; }
.painting-ai-assistant-pet-root[data-mood="happy"] .painting-ai-assistant-pet-cheek { opacity: .72; animation: painting-ai-assistant-pet-cheek .72s ease-in-out 2; }
.painting-ai-assistant-pet-cheek { opacity: 0; transition: opacity .3s ease; }
.painting-ai-assistant-bubble, .painting-ai-assistant-viewer { position: absolute; z-index: 1; color: #202638; background: #fff; border: 1px solid #d8dbea; border-radius: 18px; box-shadow: 0 18px 46px rgba(34,43,76,.22); pointer-events: auto; }
.painting-ai-assistant-bubble[hidden], .painting-ai-assistant-viewer[hidden] { display: none !important; }
.painting-ai-assistant-bubble { display: flex; flex-direction: column; overflow: hidden; width: min(416px, calc(100vw - 24px)); max-height: min(580px, calc(100vh - 24px)); }
.painting-ai-assistant-bubble[data-side="left"] .painting-ai-assistant-tail { right: -9px; }
.painting-ai-assistant-bubble[data-side="right"] .painting-ai-assistant-tail { left: -9px; transform: rotate(225deg); }
.painting-ai-assistant-bubble[data-side="above"] .painting-ai-assistant-tail { left: var(--tail-x); top: auto; bottom: -9px; transform: rotate(135deg); }
.painting-ai-assistant-tail { position: absolute; top: var(--tail-y); width: 16px; height: 16px; border-top: 1px solid #d8dbea; border-right: 1px solid #d8dbea; background: #fff; transform: rotate(45deg); }
.painting-ai-assistant-bubble > header, .painting-ai-assistant-viewer > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border-bottom: 1px solid #ececf4; background: linear-gradient(135deg,#f5f3ff,#fff); }
.painting-ai-assistant-bubble > header strong { display: block; font-size: 14px; }
.painting-ai-assistant-bubble > header small { display: block; margin-top: 3px; color: #77819a; font-size: 11px; }
.painting-ai-assistant-bubble header button, .painting-ai-assistant-viewer header button { min-width: 28px; min-height: 28px; padding: 4px 8px; border: 0; border-radius: 8px; background: #f0effa; color: #5b5f78; cursor: pointer; }
.painting-ai-assistant-messages { flex: 1; min-height: 120px; overflow: auto; padding: 14px; font-size: 13px; line-height: 1.65; background: #fafaff; }
.painting-ai-assistant-messages p { margin: 0 0 10px; padding: 9px 11px; border-radius: 11px; background: #fff; border: 1px solid #ececf4; white-space: pre-wrap; }
.painting-ai-assistant-messages p.is-user { margin-left: 28px; background: #6255e8; border-color: #6255e8; color: #fff; }
.painting-ai-assistant-messages p.is-error, .painting-ai-assistant-form-error { color: #b33b4b; border-color: #f2c6cc; background: #fff5f6; }
.painting-ai-assistant-result { margin: 0 0 10px; padding: 8px; border: 1px solid #e4e7f0; border-radius: 11px; background: #fff; }
.painting-ai-assistant-result button { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.painting-ai-assistant-result img { display: block; width: 100%; max-height: 260px; object-fit: contain; border-radius: 8px; background: #f6f7fb; }
.painting-ai-assistant-result figcaption { margin-top: 6px; color: #77819a; font-size: 11px; }
.painting-ai-assistant-capture { display: block; margin: -4px 0 10px; color: #77819a; font-size: 10px; }
.painting-ai-assistant-retry { margin: 0 0 10px; padding: 7px 10px; border: 1px solid #d9dbea; border-radius: 9px; background: #fff; color: #6255e8; cursor: pointer; }
.painting-ai-assistant-composer { flex: none; background: #fff; }
.painting-ai-assistant-basis { display: block; margin: 0; padding: 8px 14px 0; color: #7a849d; font-size: 11px; }
.painting-ai-assistant-bubble textarea { display: block; width: calc(100% - 24px); margin: 8px 12px; resize: vertical; min-height: 58px; padding: 10px 11px; border: 1px solid #d9dbea; border-radius: 11px; font: inherit; color: inherit; outline: none; }
.painting-ai-assistant-bubble textarea:focus { border-color: #7568ef; box-shadow: 0 0 0 3px rgba(117,104,239,.14); }
.painting-ai-assistant-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 12px 12px; }
.painting-ai-assistant-actions small { margin-right: auto; color: #8a93a9; font-size: 10px; }
.painting-ai-assistant-actions button { border: 0; border-radius: 10px; padding: 8px 18px; color: #fff; background: #6255e8; cursor: pointer; }
.painting-ai-assistant-actions button[data-assistant-cancel] { background: #a34a5a; }
.painting-ai-assistant-actions button:disabled { opacity: .6; cursor: wait; }
.painting-ai-assistant-form-error { margin: 0 12px 10px; padding: 8px; border: 1px solid #f2c6cc; border-radius: 8px; font-size: 11px; }
.painting-ai-assistant-viewer { display: flex; flex-direction: column; overflow: hidden; }
.painting-ai-assistant-viewer-stage { display: grid; place-items: center; min-height: 120px; overflow: hidden; background: #202638; touch-action: none; }
.painting-ai-assistant-viewer-stage img { max-width: 100%; max-height: 100%; transform-origin: center; cursor: grab; }
@keyframes painting-ai-assistant-pet-float { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 28% { transform: translate3d(0,-2px,0) rotate(-1deg); } 56% { transform: translate3d(0,1px,0) rotate(1deg); } 78% { transform: translate3d(0,-1px,0) rotate(0deg); } }
@keyframes painting-ai-assistant-pet-breathe { 0%,100% { transform: translate3d(0,1px,0) scale(1, .99); } 42% { transform: translate3d(0,-1px,0) scale(1.018, 1.01); } 58% { transform: translate3d(0,-1px,0) scale(1.023, 1.014); } }
@keyframes painting-ai-assistant-pet-blink { 0%, 41%, 45%, 100% { transform: scaleY(1); } 42%, 44% { transform: scaleY(.12); } }
@keyframes painting-ai-assistant-pet-sad-blink { 0%, 35%, 41%, 100% { transform: scaleY(.78); } 37%, 39% { transform: scaleY(.16); } }
@keyframes painting-ai-assistant-pet-think { 0%,100% { transform: translate3d(0,1px,0) rotate(-2deg) scale(1,.99); } 50% { transform: translate3d(0,-3px,0) rotate(2deg) scale(1.025,1.01); } }
@keyframes painting-ai-assistant-pet-curious { 0%,100% { transform: translate3d(0,1px,0) rotate(-3deg) scale(1,.99); } 50% { transform: translate3d(0,-1px,0) rotate(3deg) scale(1.018,1.01); } }
@keyframes painting-ai-assistant-pet-happy { 0%,100% { transform: scale(1) translate3d(0,1px,0); } 12% { transform: scale(1.06) translate3d(0,-4px,0); } 26% { transform: scale(.99) translate3d(0,0,0); } 48% { transform: scale(1.022,1.014) translate3d(0,-1px,0); } 68% { transform: scale(1) translate3d(0,1px,0); } }
@keyframes painting-ai-assistant-pet-cheek { 0%,100% { opacity: .25; transform: scale(.9); } 50% { opacity: .78; transform: scale(1.06); } }
@media (max-width: 720px) { .painting-ai-assistant-bubble { width: calc(100vw - 24px) !important; max-height: 68vh; } .painting-ai-assistant-pet-root { width: 80px; height: 80px; } .painting-ai-assistant-pet-avatar { width: 80px; height: 80px; } .painting-ai-assistant-pet-art { width: 74px; height: 74px; } }
@media (prefers-reduced-motion: reduce) { .painting-ai-assistant-pet-root, .painting-ai-assistant-pet-avatar, .painting-ai-assistant-pet-body, .painting-ai-assistant-pet-eye, .painting-ai-assistant-pet-cheek { animation: none !important; transition: none !important; } }