/*
 * PromXAI Theme 2.0.21-test332 — Shared Porcelain Light Palette
 * Scope: single prompt detail pages, light mode only.
 *
 * This file is deliberately color-only. It does not alter layout, sizing,
 * spacing, radii, media behavior, thumbnail count, sticky behavior, or the
 * dark theme. It is loaded after prompt-glass-controls.css and aliases the
 * canonical light palette instead of maintaining a second mini-palette.
 */

html[data-theme="light"] body.promxai-prompt-focus {
  --px-prompt-light-canvas: var(--px-canvas);
  --px-prompt-light-canvas-soft: var(--px-canvas-subtle);
  --px-prompt-light-surface: var(--px-surface-1);
  --px-prompt-light-surface-strong: var(--px-surface-2);
  --px-prompt-light-surface-inner: var(--px-surface-muted);
  --px-prompt-light-text: var(--px-text-primary);
  --px-prompt-light-muted: var(--px-text-secondary);
  --px-prompt-light-line: var(--px-line);
  --px-prompt-light-line-strong: var(--px-line-strong);
  --px-prompt-light-shadow: rgb(42 56 84 / .12);
  --px-prompt-light-blue: var(--px-accent-blue);
  --px-prompt-light-purple: var(--px-accent-purple);
  --px-prompt-light-pink: var(--px-accent-magenta);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, .80), transparent 32rem),
    radial-gradient(circle at 88% 14%, rgb(var(--px-accent-purple-rgb) / .045), transparent 30rem),
    linear-gradient(145deg, var(--px-canvas-subtle) 0%, var(--px-canvas) 48%, var(--px-canvas-deep) 100%) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 {
  --px-139-bg: var(--px-prompt-light-canvas) !important;
  --px-139-bg-soft: var(--px-prompt-light-canvas-soft) !important;
  --px-139-text: var(--px-prompt-light-text) !important;
  --px-139-muted: var(--px-prompt-light-muted) !important;
  --px-139-line: var(--px-prompt-light-line) !important;
  --px-139-glass: var(--px-prompt-light-surface) !important;
  --px-139-glass-strong: var(--px-prompt-light-surface-strong) !important;
  --px-139-media-rgb: 74 91 124 !important;
  color: var(--px-prompt-light-text) !important;
}

/* Main glass controls: one neutral pearl surface, never a white stacked box. */
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-tool-group {
  border-color: rgba(48, 65, 94, .14) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(244, 247, 250, .52)) !important;
  box-shadow:
    0 12px 27px rgba(36, 50, 77, .10),
    inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 :where(
  .px-media35-ratio-badge,
  .px-media35-counter,
  .px-media35-tool,
  .px-detail-theme-toggle,
  .px-detail-lang-toggle,
  .px-theme-icon
) {
  color: #3b4658 !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool:not(.px-media35-counter):hover,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool:not(.px-media35-counter):focus-visible {
  color: #242c3b !important;
  background: rgba(105, 84, 215, .075) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool[data-favorite-id].is-saved {
  color: #6846c6 !important;
  background: linear-gradient(135deg, rgba(52, 121, 220, .10), rgba(105, 84, 215, .12), rgba(163, 79, 161, .085)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(105, 84, 215, .17),
    0 0 15px rgba(105, 84, 215, .075) !important;
}

/* Real back control: same geometry, clearer neutral hover. */
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor {
  color: #465164 !important;
  border-color: rgba(48, 65, 94, .14) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(244, 247, 250, .52)) !important;
  box-shadow:
    0 10px 24px rgba(36, 50, 77, .085),
    inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor:hover,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor:focus-visible {
  color: #252f42 !important;
  border-color: rgba(105, 84, 215, .27) !important;
  background: linear-gradient(180deg, rgba(246, 244, 252, .92), rgba(235, 238, 247, .82)) !important;
  box-shadow:
    0 12px 26px rgba(36, 50, 77, .11),
    inset 0 1px 0 rgba(255, 255, 255, .94) !important;
}

/* Main image/video frame: neutral glass with a restrained identity edge. */
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame {
  border-color: transparent !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .62), rgba(245, 248, 251, .40)) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(52, 121, 220, .30) 34%, rgba(105, 84, 215, .26) 69%, rgba(255, 255, 255, .64)) border-box !important;
  box-shadow:
    0 18px 42px rgba(36, 50, 77, .12),
    0 0 0 1px rgba(58, 75, 106, .045),
    0 0 22px rgba(105, 84, 215, .045),
    inset 0 1px 0 rgba(255, 255, 255, .94) !important;
}

/* Navigation arrows remain subtle and readable on the pearl canvas. */
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 :where(.px-media35-arrow, .px-gallery-arrow) {
  color: #455269 !important;
  border-color: rgba(48, 65, 94, .13) !important;
  background: rgba(255, 255, 255, .54) !important;
  box-shadow: 0 8px 18px rgba(36, 50, 77, .075), inset 0 1px 0 rgba(255, 255, 255, .88) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 :where(.px-media35-arrow, .px-gallery-arrow):hover,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 :where(.px-media35-arrow, .px-gallery-arrow):focus-visible {
  color: #253044 !important;
  border-color: rgba(105, 84, 215, .25) !important;
  background: rgba(247, 247, 253, .86) !important;
  box-shadow: 0 10px 22px rgba(36, 50, 77, .10), 0 0 14px rgba(105, 84, 215, .055) !important;
}

/* Reference thumbnails: neutral inactive state, clear active identity glow. */
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb {
  border-color: rgba(48, 65, 94, .14) !important;
  background: rgba(255, 255, 255, .44) !important;
  box-shadow: 0 8px 18px rgba(36, 50, 77, .075), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb:not(.is-active):not([aria-current="true"]) img {
  filter: blur(.22px) saturate(.92) brightness(.98) !important;
  opacity: .87 !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.is-active,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-current="true"] {
  border-color: rgba(52, 121, 220, .46) !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow:
    0 0 0 2px rgba(52, 121, 220, .18),
    0 10px 24px rgba(36, 50, 77, .13),
    0 0 18px rgba(105, 84, 215, .105),
    inset 0 1px 0 rgba(255, 255, 255, .94) !important;
}

/* Right information panel: the strongest pearl surface on the page. */
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(52, 121, 220, .095), transparent 52%),
    radial-gradient(circle at 84% 76%, rgba(105, 84, 215, .075), transparent 54%) !important;
  opacity: .42 !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 :where(.px-right-panel__scroll, .px-prompt-stage) {
  color: var(--px-prompt-light-text) !important;
  border-color: transparent !important;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .88), rgba(246, 249, 252, .82)) padding-box,
    linear-gradient(145deg, rgba(52, 121, 220, .25), rgba(105, 84, 215, .22) 58%, rgba(163, 79, 161, .12)) border-box !important;
  box-shadow:
    0 30px 72px rgba(36, 50, 77, .13),
    0 12px 28px rgba(36, 50, 77, .075),
    0 0 30px rgba(105, 84, 215, .045),
    inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head h1 {
  color: #111a2a !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head h1::after {
  background: linear-gradient(90deg, var(--px-prompt-light-blue), var(--px-prompt-light-purple), var(--px-prompt-light-pink)) !important;
  opacity: .86 !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 :where(.px-project-summary, .px-prompt-text p, .px-current-scene-title) {
  color: var(--px-prompt-light-muted) !important;
}

/* Internal controls are translucent porcelain, never solid white cards. */
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 :where(
  .px-explain-button,
  .px-prompt-scene-switcher,
  .px-prompt-tabs > button,
  .px-prompt-text,
  .px-related-view-all
) {
  border-color: rgba(48, 65, 94, .13) !important;
  background: rgba(255, 255, 255, .42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 :where(.px-prompt-tabs > button.is-active, .px-prompt-scene-button.is-active, .px-prompt-scene-button[aria-current="true"]) {
  color: #202a3c !important;
  border-color: rgba(105, 84, 215, .25) !important;
  background: linear-gradient(135deg, rgba(52, 121, 220, .07), rgba(105, 84, 215, .085), rgba(163, 79, 161, .05)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 0 14px rgba(105, 84, 215, .05) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-related-mini {
  border-color: rgba(48, 65, 94, .13) !important;
  background: rgba(255, 255, 255, .54) !important;
  box-shadow: 0 10px 22px rgba(36, 50, 77, .075) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator {
  background: rgba(48, 65, 94, .10) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator__thumb {
  background: linear-gradient(180deg, var(--px-prompt-light-blue), var(--px-prompt-light-purple) 62%, var(--px-prompt-light-pink)) !important;
  box-shadow: 0 0 8px rgba(105, 84, 215, .095) !important;
}

/* Mobile uses slightly more opaque surfaces for readability, same palette. */
@media (max-width: 760px) {
  html[data-theme="light"] body.promxai-prompt-focus {
    background: linear-gradient(155deg, #edf1f4, #f5f7f9 52%, #e9edf1) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .70), rgba(245, 248, 251, .46)) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(52, 121, 220, .28), rgba(105, 84, 215, .23), rgba(255, 255, 255, .62)) border-box !important;
    box-shadow: 0 16px 34px rgba(36, 50, 77, .11), 0 0 16px rgba(105, 84, 215, .045) !important;
  }
}