/* PromXAI 1.4.0 — consolidated prompt information panel. */
/*
 * PromXAI Theme 1.4.0 consolidated
 * Prompt-detail content/layout stylesheet.
 * Desktop gallery selectors were removed from the historical 1.3.68 bundle.
 * The gallery is now owned exclusively by prompt-gallery-1-3-117.css.
 */
/*
 * PromXAI Theme 1.4.0 consolidated — Clean prompt-detail workspace.
 * This file is loaded only on single prompt pages and deliberately replaces
 * the accumulated 1.3.6–1.3.8 visual-side experiments with one coherent
 * layout inspired by the supplied MeiGen reference.
 */

.promxai-prompt-focus .px-prompt-detail-140 {
  --px-139-media-rgb: var(--px-media-rgb, 123 63 242);
  --px-139-stage-height: min(78svh, 790px);
  --px-139-rail-width: clamp(72px, 5.4vw, 92px);
  --px-139-gap: clamp(14px, 1.5vw, 24px);
  --px-139-control-size: 42px;
  --px-139-bg: #080d18;
  --px-139-bg-soft: #0d1423;
  --px-139-text: #f5f7ff;
  --px-139-muted: #abb5ca;
  --px-139-line: rgba(255,255,255,.10);
  --px-139-glass: rgba(12,18,31,.58);
  --px-139-glass-strong: rgba(16,23,39,.74);
  width: min(1600px, calc(100% - 24px));
  max-width: 1600px;
  padding: 12px 0 24px;
  color: var(--px-139-text);
  background: transparent !important;
  border-radius: 0 !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 {
  --px-139-bg: #f4f5f8;
  --px-139-bg-soft: #ffffff;
  --px-139-text: #172036;
  --px-139-muted: #68738b;
  --px-139-line: rgba(65,79,112,.13);
  --px-139-glass: rgba(255,255,255,.68);
  --px-139-glass-strong: rgba(255,255,255,.86);
}

.promxai-prompt-focus .px-prompt-detail-140,
.promxai-prompt-focus .px-prompt-detail-140 * {
  box-sizing: border-box;
}

.promxai-prompt-focus .px-detail-139-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.95fr) minmax(340px, .82fr);
  gap: clamp(18px, 2vw, 30px);
  align-items: start;
  direction: ltr;
}

.promxai-prompt-focus .px-detail-139-grid > * {
  min-width: 0;
}

.promxai-prompt-focus .px-detail-139-media {
  direction: rtl;
  min-width: 0;
  position: relative;
}

.promxai-prompt-focus .px-detail-139-shell {
  position: relative;
  min-height: var(--px-139-stage-height);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

html[data-theme="light"] .promxai-prompt-focus .px-detail-139-shell {
  background: transparent;
  box-shadow: none;
}

.promxai-prompt-focus .px-detail-139-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.018), transparent),
    radial-gradient(circle at 50% 42%, rgb(var(--px-media-rgb) / .08), transparent 44%);
}

/* Floating toolbar: one small glass pill, no stacked cards. */
.promxai-prompt-focus .px-detail-139-toolbar {
  position: absolute;
  z-index: 20;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 36px);
  padding: 7px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  color: var(--px-139-text);
  background:
    linear-gradient(135deg, rgb(var(--px-media-rgb) / .10), rgba(255,255,255,.035)),
    rgba(9,14,26,.52);
  box-shadow: 0 16px 34px rgba(3,7,18,.16), inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  overflow-x: auto;
  scrollbar-width: none;
}

.promxai-prompt-focus .px-detail-139-toolbar::-webkit-scrollbar { display: none; }

html[data-theme="light"] .promxai-prompt-focus .px-detail-139-toolbar {
  border-color: rgba(91,108,145,.14);
  color: #22304d;
  background:
    linear-gradient(135deg, rgb(var(--px-media-rgb) / .065), rgba(255,255,255,.70)),
    rgba(255,255,255,.66);
  box-shadow: 0 14px 30px rgba(94,108,142,.10), inset 0 1px 0 rgba(255,255,255,.90);
}

.promxai-prompt-focus .px-detail-139-tool {
  flex: 0 0 auto;
  width: var(--px-139-control-size);
  min-width: var(--px-139-control-size);
  height: var(--px-139-control-size);
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: inherit;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-theme="light"] .promxai-prompt-focus .px-detail-139-tool {
  border-color: rgba(81,100,141,.13);
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
}

.promxai-prompt-focus .px-detail-139-tool:hover,
.promxai-prompt-focus .px-detail-139-tool:focus-visible {
  transform: translateY(-1px);
  border-color: rgb(var(--px-media-rgb) / .52);
  background: linear-gradient(135deg, rgb(var(--px-media-rgb) / .24), rgba(255,255,255,.07));
  box-shadow: 0 0 0 1px rgb(var(--px-media-rgb) / .10), 0 0 18px rgb(var(--px-media-rgb) / .20), 0 10px 22px rgba(4,8,18,.16);
  outline: none;
}

.promxai-prompt-focus .px-detail-139-tool .px-icon {
  width: 18px;
  height: 18px;
}

.promxai-prompt-focus .px-detail-139-counter {
  width: auto;
  min-width: 68px;
  padding-inline: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.promxai-prompt-focus .px-detail-139-tool.px-detail-lang-toggle {
  width: auto;
  min-width: 64px;
  padding-inline: 10px;
}

.promxai-prompt-focus .px-detail-139-tool[data-favorite-id].is-saved {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #3b82f6, #7c3aed 52%, #c026d3);
  box-shadow: 0 0 20px rgba(177,61,235,.26), inset 0 1px 0 rgba(255,255,255,.18);
}

.promxai-prompt-focus .px-detail-139-tool .px-theme-icon {
  width: 23px;
  height: 23px;
  border: 0;
  background: transparent;
}

/* Main open viewer. */
.promxai-prompt-focus .px-detail-139-viewer {
  position: relative;
  z-index: 2;
  display: grid;
  direction: ltr;
  grid-template-columns: minmax(0, 1fr) var(--px-139-rail-width);
  gap: var(--px-139-gap);
  align-items: center;
  min-height: var(--px-139-stage-height);
  padding: 74px clamp(20px, 3vw, 48px) 24px;
}

.promxai-prompt-focus .px-detail-139-main {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--px-139-stage-height) - 98px);
}

.promxai-prompt-focus .px-detail-139-main::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(80%, 620px);
  height: min(84%, 760px);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgb(var(--px-media-rgb) / .18), rgb(var(--px-media-rgb) / .07) 44%, transparent 74%);
  filter: blur(32px);
  pointer-events: none;
}

.promxai-prompt-focus .px-detail-139-main-visual {
  position: relative;
  z-index: 2;
  width: min(100%, calc((var(--px-139-stage-height) - 106px) * 9 / 16));
  max-width: calc((var(--px-139-stage-height) - 106px) * 9 / 16);
  height: calc(var(--px-139-stage-height) - 106px);
  min-height: 520px;
  max-height: calc(var(--px-139-stage-height) - 106px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 28px;
  background: transparent;
  box-shadow: none;
}

.promxai-prompt-focus .px-detail-139-main-visual img[data-main-image],
.promxai-prompt-focus .px-detail-139-main-visual video[data-main-video] {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 26px;
  background: rgba(3,7,15,.08);
  box-shadow: 0 30px 72px rgba(3,7,17,.32), 0 0 0 1px rgba(255,255,255,.07), 0 0 32px rgb(var(--px-media-rgb) / .15);
}

html[data-theme="light"] .promxai-prompt-focus .px-detail-139-main-visual img[data-main-image],
html[data-theme="light"] .promxai-prompt-focus .px-detail-139-main-visual video[data-main-video] {
  background: rgba(255,255,255,.10);
  box-shadow: 0 26px 60px rgba(100,115,151,.18), 0 0 0 1px rgba(255,255,255,.82), 0 0 28px rgb(var(--px-media-rgb) / .09);
}

/* RC52: the current desktop/laptop gallery owner is .px-media117-frame.
   Keep PRO at one physical location (top-left) regardless of RTL/LTR. */
.promxai-prompt-focus .px-media117-frame > :is(.px-pro-badge,.px-featured-badge) {
  top: 14px;
  width: 64px;
  min-width: 64px;
  height: 28px;
  min-height: 28px;
  padding: 0 8px;
  font-size: 10px;
  border-radius: 999px;
  box-sizing: border-box;
}
.promxai-prompt-focus .px-media117-frame > .px-pro-badge {
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  left: 14px !important;
  right: auto !important;
}
.promxai-prompt-focus .px-media117-frame > .px-featured-badge {
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  right: 14px !important;
  left: auto !important;
}

.promxai-prompt-focus .px-detail-139-main-visual .px-gallery-arrow {
  position: absolute;
  z-index: 6;
  top: 50%;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(10,15,27,.52);
  box-shadow: 0 14px 30px rgba(3,7,18,.18);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

html[data-theme="light"] .promxai-prompt-focus .px-detail-139-main-visual .px-gallery-arrow {
  color: #25304c;
  border-color: rgba(75,94,132,.14);
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 28px rgba(103,117,151,.13);
}

.promxai-prompt-focus .px-detail-139-main-visual .px-gallery-arrow:hover {
  border-color: rgb(var(--px-media-rgb) / .54);
  box-shadow: 0 0 0 1px rgb(var(--px-media-rgb) / .12), 0 0 18px rgb(var(--px-media-rgb) / .20), 0 14px 30px rgba(3,7,18,.20);
}
.promxai-prompt-focus .px-detail-139-main-visual .px-gallery-arrow--prev:hover {
  transform: translateY(-50%) scale(1.04);
}
.promxai-prompt-focus .px-detail-139-main-visual .px-gallery-arrow--next:hover {
  transform: translateY(-50%) rotate(180deg) scale(1.04);
}

.promxai-prompt-focus .px-detail-139-main-visual .px-gallery-arrow--prev {
  left: -72px;
  transform: translateY(-50%);
}

.promxai-prompt-focus .px-detail-139-main-visual .px-gallery-arrow--next {
  right: -72px;
  transform: translateY(-50%) rotate(180deg);
}

html[dir="ltr"] .promxai-prompt-focus .px-detail-139-main-visual .px-gallery-arrow--next {
  transform: translateY(-50%);
}
html[dir="ltr"] .promxai-prompt-focus .px-detail-139-main-visual .px-gallery-arrow--prev {
  transform: translateY(-50%) rotate(180deg);
}
html[dir="ltr"] .promxai-prompt-focus .px-detail-139-main-visual .px-gallery-arrow--next:hover {
  transform: translateY(-50%) scale(1.04);
}
html[dir="ltr"] .promxai-prompt-focus .px-detail-139-main-visual .px-gallery-arrow--prev:hover {
  transform: translateY(-50%) rotate(180deg) scale(1.04);
}

.promxai-prompt-focus .px-detail-139-main-visual .px-gallery-arrow .px-icon {
  width: 22px;
  height: 22px;
}

/* Open reference strip: no surrounding card. */
.promxai-prompt-focus .px-detail-139-rail {
  width: var(--px-139-rail-width);
  min-width: var(--px-139-rail-width);
  align-self: stretch;
  display: flex;
  align-items: center;
  min-height: 0;
}

.promxai-prompt-focus .px-detail-139-thumbs {
  width: 100%;
  max-height: calc(var(--px-139-stage-height) - 106px);
  min-height: 0;
  margin: 0;
  padding: 0 3px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--px-media-rgb) / .32) transparent;
}

.promxai-prompt-focus .px-detail-139-thumbs::-webkit-scrollbar { width: 5px; }
.promxai-prompt-focus .px-detail-139-thumbs::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgb(var(--px-media-rgb) / .32);
}

.promxai-prompt-focus .px-detail-139-thumb {
  position: relative;
  flex: 0 0 var(--px-thumb-size, 62px);
  width: 100%;
  height: var(--px-thumb-size, 62px);
  min-height: var(--px-thumb-size, 62px);
  max-height: var(--px-thumb-size, 62px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 15px;
  opacity: .72;
  background: rgba(255,255,255,.03);
  box-shadow: 0 8px 18px rgba(4,8,18,.08);
  cursor: pointer;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb {
  border-color: rgba(75,94,132,.12);
  background: rgba(255,255,255,.45);
  box-shadow: 0 8px 16px rgba(108,121,154,.09);
}

.promxai-prompt-focus .px-detail-139-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.promxai-prompt-focus .px-detail-139-thumb:hover {
  opacity: .94;
  transform: translateY(-1px);
  border-color: rgb(var(--px-media-rgb) / .45);
  box-shadow: 0 0 16px rgb(var(--px-media-rgb) / .15), 0 10px 22px rgba(4,8,18,.10);
}

.promxai-prompt-focus .px-detail-139-thumb.is-active {
  opacity: 1;
  border-color: rgb(var(--px-media-rgb) / .76);
  box-shadow: 0 0 0 2px rgb(var(--px-media-rgb) / .16), 0 0 22px rgb(var(--px-media-rgb) / .19), 0 10px 24px rgba(4,8,18,.14);
}

.promxai-prompt-focus .px-detail-139-thumb .px-thumb-play {
  width: 28px;
  height: 28px;
}

/* Preserve the established right information design, only normalize height. */
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-column {
  direction: rtl;
  min-width: 0;
}
html[data-ui-lang="en"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-column {
  direction: ltr;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head,
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-copy-card,
.promxai-prompt-focus .px-prompt-detail-140 .px-related-inline {
  border-radius: 24px;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head h1 {
  font-size: clamp(28px, 2.5vw, 43px);
  line-height: 1.26;
  text-wrap: balance;
}

/* Tablet */
@media (max-width: 1180px) and (min-width: 761px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    --px-139-stage-height: min(74svh, 700px);
    --px-139-rail-width: 72px;
    --px-139-control-size: 38px;
  }
  .promxai-prompt-focus .px-detail-139-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(315px, .75fr);
    gap: 16px;
  }
  .promxai-prompt-focus .px-detail-139-viewer {
    padding-inline: 24px;
    gap: 12px;
  }
  .promxai-prompt-focus .px-detail-139-toolbar {
    top: 14px;
    right: 14px;
  }
  .promxai-prompt-focus .px-detail-139-tool.px-detail-theme-toggle,
  .promxai-prompt-focus .px-detail-139-tool.px-detail-lang-toggle {
    display: none;
  }
  .promxai-prompt-focus .px-detail-139-main-visual .px-gallery-arrow--prev { left: -58px; }
  .promxai-prompt-focus .px-detail-139-main-visual .px-gallery-arrow--next { right: -58px; }
}

/* Mobile keeps the previously approved swipe gallery and stacks info below. */
@media (max-width: 760px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    width: calc(100% - 12px);
    padding-top: 6px;
  }
  .promxai-prompt-focus .px-detail-139-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .promxai-prompt-focus .px-detail-139-shell {
    min-height: 0;
    border-radius: 20px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .promxai-prompt-focus .px-detail-139-toolbar {
    position: relative;
    top: auto;
    inset-inline-end: auto;
    order: -1;
    width: 100%;
    margin-bottom: 8px;
    border-radius: 17px;
  }
  .promxai-prompt-focus .px-detail-139-tool {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }
  .promxai-prompt-focus .px-detail-139-tool.px-detail-lang-toggle {
    min-width: 60px;
  }
  .promxai-prompt-focus .px-detail-139-viewer,
  .promxai-prompt-focus .px-detail-139-main,
  .promxai-prompt-focus .px-detail-139-rail {
    display: none !important;
  }
  
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-column {
    width: 100%;
  }
}

/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — precision fixes requested after live review
   ======================================================================== */
.promxai-prompt-focus .px-prompt-detail-140 {
  --px-1310-image-height: clamp(430px, calc(100svh - 190px), 700px);
  --px-139-stage-height: calc(var(--px-1310-image-height) + 94px);
}

/* Always-visible direct copy controls for Arabic and English. */
.promxai-prompt-focus .px-prompt-detail-140 .px-quick-copy-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-quick-copy-button {
  min-height: 43px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--px-139-text);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  cursor: pointer;
  font-weight: 800;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-quick-copy-button {
  color: #263250;
  border-color: rgba(72,91,132,.14);
  background: rgba(255,255,255,.64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90);
}
.promxai-prompt-focus .px-prompt-detail-140 .px-quick-copy-button:hover,
.promxai-prompt-focus .px-prompt-detail-140 .px-quick-copy-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgb(var(--px-media-rgb) / .48);
  background: linear-gradient(135deg, rgb(var(--px-media-rgb) / .20), rgba(255,255,255,.065));
  box-shadow: 0 0 0 1px rgb(var(--px-media-rgb) / .10), 0 0 18px rgb(var(--px-media-rgb) / .16), 0 10px 22px rgba(4,8,18,.12);
  outline: none;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-quick-copy-button .px-icon {
  width: 17px;
  height: 17px;
}

@media (min-width: 761px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    width: min(100%, 1660px) !important;
    max-width: 1660px !important;
    padding-inline: clamp(18px, 2.2vw, 38px) !important;
  }

  .promxai-prompt-focus .px-detail-136-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.94fr) minmax(350px, .90fr) !important;
    gap: clamp(22px, 2.4vw, 40px) !important;
    align-items: start !important;
    direction: ltr !important;
  }

  .promxai-prompt-focus .px-detail-136-grid > .px-prompt-column {
    direction: rtl !important;
    min-width: 0 !important;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  
}

@media (min-width: 761px) and (max-width: 1180px) {
  .promxai-prompt-focus .px-detail-136-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(330px, .95fr) !important;
    gap: 18px !important;
  }

  

  

  
}

@media (max-width: 760px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    width: calc(100% - 12px);
    padding-top: 6px;
  }
  .promxai-prompt-focus .px-detail-139-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .promxai-prompt-focus .px-detail-139-shell {
    min-height: 0;
    border-radius: 20px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .promxai-prompt-focus .px-detail-139-toolbar {
    position: relative;
    top: auto;
    inset-inline-end: auto;
    order: -1;
    width: 100%;
    margin-bottom: 8px;
    border-radius: 17px;
  }
  .promxai-prompt-focus .px-detail-139-tool {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }
  .promxai-prompt-focus .px-detail-139-tool.px-detail-lang-toggle {
    min-width: 60px;
  }
  .promxai-prompt-focus .px-detail-139-viewer,
  .promxai-prompt-focus .px-detail-139-main,
  .promxai-prompt-focus .px-detail-139-rail {
    display: none !important;
  }
  
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-column {
    width: 100%;
  }
}

/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — precision fixes requested after live review
   ======================================================================== */
.promxai-prompt-focus .px-prompt-detail-140 {
  --px-1310-image-height: clamp(430px, calc(100svh - 190px), 700px);
  --px-139-stage-height: calc(var(--px-1310-image-height) + 94px);
}

/* Always-visible direct copy controls for Arabic and English. */
.promxai-prompt-focus .px-prompt-detail-140 .px-quick-copy-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-quick-copy-button {
  min-height: 43px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--px-139-text);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  cursor: pointer;
  font-weight: 800;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-quick-copy-button {
  color: #263250;
  border-color: rgba(72,91,132,.14);
  background: rgba(255,255,255,.64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90);
}
.promxai-prompt-focus .px-prompt-detail-140 .px-quick-copy-button:hover,
.promxai-prompt-focus .px-prompt-detail-140 .px-quick-copy-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgb(var(--px-media-rgb) / .48);
  background: linear-gradient(135deg, rgb(var(--px-media-rgb) / .20), rgba(255,255,255,.065));
  box-shadow: 0 0 0 1px rgb(var(--px-media-rgb) / .10), 0 0 18px rgb(var(--px-media-rgb) / .16), 0 10px 22px rgba(4,8,18,.12);
  outline: none;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-quick-copy-button .px-icon {
  width: 17px;
  height: 17px;
}

@media (min-width: 761px) {
  /* The main artwork is sized from the available viewport so its bottom is
     always visible. The previous hard minimum that could force overflow is
     deliberately neutralized here. */
  .promxai-prompt-focus .px-detail-139-viewer {
    min-height: var(--px-139-stage-height) !important;
    padding-top: 72px !important;
    padding-bottom: 22px !important;
  }
  .promxai-prompt-focus .px-detail-139-main {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(12px, 1.4vw, 20px) !important;
    min-height: var(--px-1310-image-height) !important;
    overflow: visible !important;
  }
  .promxai-prompt-focus .px-detail-139-main-visual {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: min(100%, calc(var(--px-1310-image-height) * 9 / 16)) !important;
    height: var(--px-1310-image-height) !important;
    min-height: auto !important;
    max-height: var(--px-1310-image-height) !important;
    aspect-ratio: 9 / 16 !important;
    overflow: visible !important;
  }
  .promxai-prompt-focus .px-detail-139-main-visual img[data-main-image],
  .promxai-prompt-focus .px-detail-139-main-visual video[data-main-video] {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* Navigation arrows are siblings of the image frame, not overlays. */
  .promxai-prompt-focus .px-detail-139-main > .px-gallery-arrow {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    align-self: center !important;
  }
  .promxai-prompt-focus .px-detail-139-main > .px-gallery-arrow--prev {
    transform: rotate(180deg) !important;
  }
  .promxai-prompt-focus .px-detail-139-main > .px-gallery-arrow--next {
    transform: none !important;
  }
  .promxai-prompt-focus .px-detail-139-main > .px-gallery-arrow--prev:hover {
    transform: rotate(180deg) scale(1.04) !important;
  }
  .promxai-prompt-focus .px-detail-139-main > .px-gallery-arrow--next:hover {
    transform: scale(1.04) !important;
  }

  /* Reference images are open media, not another glass/card layer. */
  .promxai-prompt-focus .px-detail-139-rail,
  .promxai-prompt-focus .px-detail-139-thumbs,
  .promxai-prompt-focus .px-detail-139-thumbs.px-visual-thumbs {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .promxai-prompt-focus .px-detail-139-rail {
    padding: 0 !important;
  }
  .promxai-prompt-focus .px-detail-139-thumbs,
  .promxai-prompt-focus .px-detail-139-thumbs.px-visual-thumbs {
    max-height: var(--px-1310-image-height) !important;
    padding: 0 3px 0 0 !important;
  }
  .promxai-prompt-focus .px-detail-139-thumb,
  .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: .72;
    overflow: visible !important;
  }
  .promxai-prompt-focus .px-detail-139-thumb img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 13px !important;
    box-shadow: none !important;
  }
  .promxai-prompt-focus .px-detail-139-thumb:hover {
    opacity: .96;
    transform: translateY(-1px) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .promxai-prompt-focus .px-detail-139-thumb.is-active {
    opacity: 1;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 2px solid rgb(var(--px-media-rgb) / .62);
    outline-offset: 3px;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    --px-1310-image-height: clamp(400px, calc(100svh - 188px), 620px);
  }
  .promxai-prompt-focus .px-detail-139-main > .px-gallery-arrow {
    flex-basis: 46px !important;
    width: 46px !important;
    height: 46px !important;
  }
}

@media (max-width: 760px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-quick-copy-actions {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-quick-copy-button {
    min-height: 42px;
    padding-inline: 10px;
    font-size: 12px;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — live review refinements
   - 2-column related grid up to 12 items
   - thinner/raised controls
   - centered reference images with no internal scrolling
   ======================================================================== */

/* A thinner toolbar, lifted closer to the top edge. */
.promxai-prompt-focus .px-prompt-detail-140 {
  --px-139-control-size: 34px;
}
.promxai-prompt-focus .px-detail-139-toolbar {
  top: 4px !important;
  right: 14px !important;
  gap: 5px !important;
  padding: 4px !important;
  border-radius: 999px !important;
  border-width: 1px !important;
  background:
    linear-gradient(135deg, rgb(var(--px-media-rgb) / .075), rgba(255,255,255,.025)),
    rgba(9,14,26,.40) !important;
  box-shadow: 0 10px 24px rgba(3,7,18,.11), inset 0 1px 0 rgba(255,255,255,.055) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
}
html[data-theme="light"] .promxai-prompt-focus .px-detail-139-toolbar {
  background:
    linear-gradient(135deg, rgb(var(--px-media-rgb) / .045), rgba(255,255,255,.66)),
    rgba(255,255,255,.56) !important;
  box-shadow: 0 9px 21px rgba(94,108,142,.075), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
.promxai-prompt-focus .px-detail-139-tool {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-color: rgba(255,255,255,.09) !important;
  background: rgba(255,255,255,.036) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.038) !important;
}
html[data-theme="light"] .promxai-prompt-focus .px-detail-139-tool {
  border-color: rgba(81,100,141,.10) !important;
  background: rgba(255,255,255,.50) !important;
}
.promxai-prompt-focus .px-detail-139-tool .px-icon {
  width: 16px !important;
  height: 16px !important;
}
.promxai-prompt-focus .px-detail-139-counter {
  min-width: 60px !important;
  padding-inline: 9px !important;
  font-size: 12px !important;
}
.promxai-prompt-focus .px-detail-139-tool.px-detail-lang-toggle {
  min-width: 56px !important;
  padding-inline: 8px !important;
  font-size: 11px !important;
}
.promxai-prompt-focus .px-detail-139-tool .px-theme-icon {
  width: 19px !important;
  height: 19px !important;
}

@media (min-width: 761px) {
  /* The reference column has the same usable height as the 9:16 main image.
     A small set stays centred; larger sets shrink evenly to fill the column. */
  .promxai-prompt-focus .px-detail-139-viewer {
    padding-top: 54px !important;
  }
  .promxai-prompt-focus .px-detail-139-rail {
    height: var(--px-1310-image-height) !important;
    min-height: var(--px-1310-image-height) !important;
    max-height: var(--px-1310-image-height) !important;
    align-self: center !important;
    overflow: visible !important;
  }
  .promxai-prompt-focus .px-detail-139-thumbs,
  .promxai-prompt-focus .px-detail-139-thumbs.px-visual-thumbs {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 6px !important;
    overflow: visible !important;
    scrollbar-width: none !important;
  }
  .promxai-prompt-focus .px-detail-139-thumbs::-webkit-scrollbar,
  .promxai-prompt-focus .px-detail-139-thumbs.px-visual-thumbs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .promxai-prompt-focus .px-detail-139-thumb,
  .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb {
    flex: 0 0 var(--px-thumb-size, 60px) !important;
    width: 100% !important;
    height: var(--px-thumb-size, 60px) !important;
    min-height: var(--px-thumb-size, 60px) !important;
    max-height: var(--px-thumb-size, 60px) !important;
  }
}

/* Related prompts become a vertical 2 × 6 gallery instead of a slider. */
.promxai-prompt-focus .px-prompt-detail-140 .px-related-inline {
  overflow: visible !important;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-related-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  padding: 2px 0 0 !important;
  scroll-snap-type: none !important;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-related-mini {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 15px !important;
  scroll-snap-align: unset !important;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-related-mini > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

@media (max-width: 760px) {
  .promxai-prompt-focus .px-detail-139-toolbar {
    top: auto !important;
    right: auto !important;
    padding: 5px !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-related-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
}

/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — final prompt-detail polish pack
   Balanced arrows, larger 9:16 media, seven visible references, and a
   refined toolbar hierarchy without altering the stable prompt systems.
   ======================================================================== */
.promxai-prompt-focus .px-prompt-detail-140 {
  --px-1310-image-height: clamp(450px, calc(100svh - 170px), 735px);
  --px-139-stage-height: calc(var(--px-1310-image-height) + 78px);
  --px-139-rail-width: clamp(94px, 6.6vw, 112px);
  --px-139-control-size: 32px;
}

/* Remove the branded blue scrollbar line beside the information column. */
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-column {
  scrollbar-width: none !important;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-column::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* A thinner toolbar, lifted slightly above the previous baseline. */
.promxai-prompt-focus .px-detail-139-toolbar {
  top: -7px !important;
  right: 8px !important;
  gap: 5px !important;
  padding: 4px !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  align-items: center !important;
}
.promxai-prompt-focus .px-detail-139-tool {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  line-height: 1 !important;
}
.promxai-prompt-focus .px-detail-139-tool .px-icon {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  stroke-width: 2 !important;
}
.promxai-prompt-focus .px-detail-139-counter {
  width: auto !important;
  min-width: 58px !important;
  padding-inline: 9px !important;
  font-size: 11px !important;
}

/* Language and theme controls now share exactly the same outer dimensions. */
.promxai-prompt-focus .px-detail-139-tool.px-detail-lang-toggle,
.promxai-prompt-focus .px-detail-139-tool.px-detail-theme-toggle {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding-inline: 6px !important;
}
.promxai-prompt-focus .px-detail-139-tool.px-detail-lang-toggle {
  gap: 5px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}
.promxai-prompt-focus .px-detail-139-tool.px-detail-theme-toggle {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 2px !important;
  padding: 2px !important;
}
.promxai-prompt-focus .px-detail-139-tool.px-detail-theme-toggle .px-theme-icon {
  width: 24px !important;
  height: 26px !important;
  min-width: 24px !important;
  min-height: 26px !important;
  border-radius: 9px !important;
}
.promxai-prompt-focus .px-detail-139-tool.px-detail-theme-toggle .px-theme-icon .px-icon {
  width: 13px !important;
  height: 13px !important;
}

/* Give favorite a recognizable identity even before it is saved. */
.promxai-prompt-focus .px-detail-139-tool[data-favorite-id] {
  color: #d86ac6 !important;
  border-color: rgba(255, 65, 190, .28) !important;
  background: linear-gradient(145deg, rgb(192 38 211 / .14), rgb(124 58 237 / .10)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 14px rgb(192 38 211 / .08) !important;
}
.promxai-prompt-focus .px-detail-139-tool[data-favorite-id]:hover,
.promxai-prompt-focus .px-detail-139-tool[data-favorite-id]:focus-visible {
  color: #fff !important;
  border-color: rgba(255, 83, 200, .52) !important;
  background: linear-gradient(135deg, rgb(124 58 237 / .48), rgb(192 38 211 / .44)) !important;
  box-shadow: 0 0 0 1px rgb(192 38 211 / .12), 0 0 20px rgb(192 38 211 / .20), 0 10px 22px rgba(4,8,18,.15) !important;
}
.promxai-prompt-focus .px-detail-139-tool[data-favorite-id].is-saved {
  color: #fff !important;
  border-color: rgba(255,255,255,.16) !important;
  background: linear-gradient(135deg, #3b82f6, #7c3aed 50%, #c026d3) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 0 22px rgba(211,60,231,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* Back remains easy to discover without competing with the favorite state. */
.promxai-prompt-focus .px-legacy-detail-back-disabled[data-go-back] {
  color: #c9dcff !important;
  border-color: rgb(37 99 235 / .25) !important;
  background: linear-gradient(145deg, rgb(37 99 235 / .14), rgb(124 58 237 / .08)) !important;
}
html[data-theme="light"] .promxai-prompt-focus .px-legacy-detail-back-disabled[data-go-back] {
  color: #405da2 !important;
  border-color: rgba(77, 104, 180, .20) !important;
  background: linear-gradient(145deg, rgb(37 99 235 / .10), rgb(124 58 237 / .05)) !important;
}

@media (min-width: 761px) {
  .promxai-prompt-focus .px-detail-139-viewer {
    padding-top: 48px !important;
    padding-bottom: 14px !important;
  }

  /* Equal arrow columns keep both controls at the same distance from media. */
  .promxai-prompt-focus .px-detail-139-main {
    display: grid !important;
    grid-template-columns: 48px minmax(0, auto) 48px !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: clamp(16px, 1.45vw, 22px) !important;
    min-height: var(--px-1310-image-height) !important;
    overflow: visible !important;
  }
  .promxai-prompt-focus .px-detail-139-main > .px-gallery-arrow {
    position: relative !important;
    inset: auto !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: center !important;
  }
  .promxai-prompt-focus .px-detail-139-main-visual {
    width: calc(var(--px-1310-image-height) * 9 / 16) !important;
    max-width: min(100%, calc(var(--px-1310-image-height) * 9 / 16)) !important;
    height: var(--px-1310-image-height) !important;
    min-height: auto !important;
    max-height: var(--px-1310-image-height) !important;
  }

  /* Seven visible reference images: bigger, centred, and without scrolling. */
  .promxai-prompt-focus .px-detail-139-rail {
    width: var(--px-139-rail-width) !important;
    min-width: var(--px-139-rail-width) !important;
    max-width: var(--px-139-rail-width) !important;
    height: var(--px-1310-image-height) !important;
    min-height: var(--px-1310-image-height) !important;
    max-height: var(--px-1310-image-height) !important;
    align-self: center !important;
    overflow: visible !important;
  }
  .promxai-prompt-focus .px-detail-139-thumbs,
  .promxai-prompt-focus .px-detail-139-thumbs.px-visual-thumbs {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 3px !important;
    overflow: visible !important;
    scrollbar-width: none !important;
  }
  .promxai-prompt-focus .px-detail-139-thumbs::-webkit-scrollbar,
  .promxai-prompt-focus .px-detail-139-thumbs.px-visual-thumbs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .promxai-prompt-focus .px-detail-139-thumb[hidden],
  .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb[hidden] {
    display: none !important;
  }
  .promxai-prompt-focus .px-detail-139-thumb,
  .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb {
    flex: 0 0 var(--px-thumb-size, 70px) !important;
    width: 100% !important;
    height: var(--px-thumb-size, 70px) !important;
    min-height: var(--px-thumb-size, 70px) !important;
    max-height: var(--px-thumb-size, 70px) !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }
  .promxai-prompt-focus .px-detail-139-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 18px rgba(3,7,17,.12) !important;
  }
  html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb img {
    box-shadow: 0 8px 18px rgba(100,115,151,.12) !important;
  }
  .promxai-prompt-focus .px-detail-139-thumb.is-active {
    outline-width: 2px !important;
    outline-offset: 3px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    --px-1310-image-height: clamp(420px, calc(100svh - 172px), 655px);
    --px-139-rail-width: clamp(88px, 8vw, 102px);
  }
  .promxai-prompt-focus .px-detail-139-main {
    grid-template-columns: 44px minmax(0, auto) 44px !important;
    column-gap: 13px !important;
  }
  .promxai-prompt-focus .px-detail-139-main > .px-gallery-arrow {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}


/* ==========================================================
   PromXAI Theme 1.4.0 consolidated — five large references + reliable scenes
   ========================================================== */
@media (min-width: 761px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    --px-139-rail-width: clamp(108px, 8vw, 132px);
  }

  .promxai-prompt-focus .px-detail-139-rail {
    height: calc(var(--px-139-stage-height) - 106px) !important;
    max-height: calc(var(--px-139-stage-height) - 106px) !important;
    align-self: center !important;
  }

  .promxai-prompt-focus .px-detail-139-thumbs {
    height: 100% !important;
    max-height: none !important;
    min-height: auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: repeat(var(--px-visible-thumb-count, 5), minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
    scrollbar-width: none !important;
  }

  .promxai-prompt-focus .px-detail-139-thumbs::-webkit-scrollbar {
    display: none !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb {
    width: 100% !important;
    height: 100% !important;
    min-height: auto !important;
    max-height: none !important;
    flex: initial !important;
    border-radius: 20px !important;
    opacity: .82 !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb img {
    object-fit: cover !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb.is-active {
    opacity: 1 !important;
    border-color: rgb(var(--px-media-rgb) / .72) !important;
    box-shadow: 0 0 0 2px rgb(var(--px-media-rgb) / .14), 0 0 18px rgb(var(--px-media-rgb) / .16) !important;
  }
}

.promxai-prompt-focus .px-prompt-scene-switcher {
  display: grid !important;
  grid-template-columns: repeat(var(--px-scene-count, 5), minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
  padding: 6px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.025) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-scene-switcher {
  border-color: rgba(86,103,143,.13) !important;
  background: rgba(95,112,153,.035) !important;
}

.promxai-prompt-focus .px-prompt-scene-button {
  position: relative !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 9px 8px 11px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: var(--px-139-muted, #abb5ca) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: color .18s ease, background .18s ease, transform .18s ease !important;
}

.promxai-prompt-focus .px-prompt-scene-button::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 5px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, #7c3aed, #c026d3);
  opacity: 0;
  transform: scaleX(.45);
  transition: opacity .18s ease, transform .18s ease;
}

.promxai-prompt-focus .px-prompt-scene-button:hover,
.promxai-prompt-focus .px-prompt-scene-button:focus-visible {
  color: var(--px-139-text, #fff) !important;
  background: rgb(var(--px-media-rgb) / .08) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

.promxai-prompt-focus .px-prompt-scene-button.is-active {
  color: var(--px-139-text, #fff) !important;
  background: linear-gradient(135deg, rgb(var(--px-media-rgb) / .12), rgba(255,255,255,.035)) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--px-media-rgb) / .18) !important;
}

.promxai-prompt-focus .px-prompt-scene-button.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-scene-button {
  color: #667085 !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-scene-button:hover,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-scene-button:focus-visible,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-scene-button.is-active {
  color: #172036 !important;
}

.promxai-prompt-focus .px-current-scene-title {
  display: none !important;
}

@media (max-width: 760px) {
  .promxai-prompt-focus .px-prompt-scene-switcher {
    display: flex !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .promxai-prompt-focus .px-prompt-scene-switcher::-webkit-scrollbar {
    display: none !important;
  }
  .promxai-prompt-focus .px-prompt-scene-button {
    flex: 0 0 auto !important;
    min-width: 128px !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — prompt availability and related-content drawer
   ======================================================================== */
.promxai-prompt-focus .px-prompt-detail-140 .px-quick-copy-actions {
  display: none !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-copy-card[hidden] {
  display: none !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-related-drawer {
  --px-related-drawer-height: 112px;
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  width: 100%;
  height: var(--px-related-drawer-height);
  min-height: 112px;
  max-height: min(62vh, 560px);
  margin-top: auto !important;
  padding: 0 14px 14px !important;
  overflow: hidden !important;
  border-color: rgba(148, 163, 184, .13) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
  box-shadow: 0 -14px 34px rgba(3,7,18,.12), inset 0 1px 0 rgba(255,255,255,.055) !important;
  transition: height .28s ease, box-shadow .24s ease, border-color .24s ease;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-related-drawer {
  border-color: rgba(94, 110, 151, .13) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,255,.84)) !important;
  box-shadow: 0 -14px 30px rgba(103,117,152,.10), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.promxai-prompt-focus .px-related-drawer.is-expanded,
.promxai-prompt-focus .px-related-drawer:focus-within {
  border-color: rgb(var(--px-media-rgb) / .28) !important;
  box-shadow: 0 -18px 42px rgba(3,7,18,.18), 0 0 22px rgb(var(--px-media-rgb) / .10) !important;
}

.promxai-prompt-focus .px-related-drawer.is-dragging {
  transition: none !important;
  user-select: none;
}

.promxai-prompt-focus .px-related-drawer-handle {
  position: sticky;
  top: 0;
  z-index: 3;
  width: 100%;
  min-height: 58px;
  padding: 10px 48px 8px 10px;
  border: 0;
  color: var(--px-139-text);
  background: transparent;
  font: inherit;
  font-size: 17px;
  font-weight: 900;
  text-align: start;
  cursor: ns-resize;
  touch-action: none;
}

html[data-theme="light"] .promxai-prompt-focus .px-related-drawer-handle {
  color: #172036;
}

.promxai-prompt-focus .px-related-drawer-grip {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 42px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #c026d3);
  opacity: .72;
  transition: width .2s ease, opacity .2s ease;
}

.promxai-prompt-focus .px-related-drawer-handle:hover .px-related-drawer-grip,
.promxai-prompt-focus .px-related-drawer.is-expanded .px-related-drawer-grip {
  width: 62px;
  opacity: 1;
}

.promxai-prompt-focus .px-related-drawer .px-related-inline__head {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 5;
  margin: 0 !important;
}

.promxai-prompt-focus .px-related-drawer .px-related-strip {
  max-height: calc(var(--px-related-drawer-height) - 68px);
  padding-bottom: 10px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.promxai-prompt-focus .px-related-drawer:not(.is-expanded) .px-related-strip {
  pointer-events: none;
}

@media (hover: hover) and (min-width: 981px) {
  .promxai-prompt-focus .px-related-drawer:hover {
    height: min(42vh, 390px);
  }
}

@media (max-width: 980px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-related-drawer {
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    padding: 0 14px 14px !important;
    overflow: visible !important;
  }
  .promxai-prompt-focus .px-related-drawer-handle {
    min-height: 54px;
    cursor: pointer;
  }
  .promxai-prompt-focus .px-related-drawer .px-related-strip {
    max-height: none;
    overflow: visible !important;
  }
  .promxai-prompt-focus .px-related-drawer:not(.is-expanded) .px-related-strip {
    display: none !important;
  }
}

/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — full related grid + protected image lightbox
   ======================================================================== */

/* Let the information column continue naturally down the page. */
@media (min-width: 981px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-column {
    height: auto !important;
    min-height: var(--px-139-stage-height) !important;
    max-height: none !important;
    overflow: visible !important;
    scrollbar-gutter: auto !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage {
    position: static !important;
    min-height: auto !important;
    display: block !important;
  }
}

/* Restore a full natural 2 × 6 related gallery. */
.promxai-prompt-focus .px-prompt-detail-140 .px-related-grid-section {
  position: static !important;
  z-index: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 18px !important;
  padding: 18px !important;
  overflow: visible !important;
  border-radius: 24px !important;
}
.promxai-prompt-focus .px-related-grid-section .px-related-inline__head {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
}
.promxai-prompt-focus .px-related-grid-section .px-related-inline__head h2 {
  margin: 0 !important;
  font-size: clamp(17px, 1.45vw, 21px) !important;
  line-height: 1.35 !important;
}
.promxai-prompt-focus .px-related-grid-section .px-related-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 12px !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  scroll-snap-type: none !important;
}
.promxai-prompt-focus .px-related-grid-section .px-related-mini {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 17px !important;
  overflow: hidden !important;
}
.promxai-prompt-focus .px-related-grid-section .px-related-mini > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Expand tool matches the existing toolbar language. */
.promxai-prompt-focus [data-media-expand] {
  color: color-mix(in srgb, rgb(var(--px-media-rgb)) 58%, currentColor) !important;
}
.promxai-prompt-focus [data-media-expand]:hover {
  color: #fff !important;
}

/* Full-screen image viewer: no download control or direct-link UI. */
.px-media-lightbox[hidden] {
  display: none !important;
}
.px-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.px-media-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 15, .93);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}
.px-media-lightbox__panel {
  position: relative;
  z-index: 1;
  width: min(96vw, 1600px);
  height: min(94svh, 1080px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}
.px-media-lightbox__tools {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: #f8fafc;
  background: rgba(17,24,39,.70);
  box-shadow: 0 16px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.px-media-lightbox__tools button {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  color: inherit;
  background: rgba(255,255,255,.055);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.px-media-lightbox__tools button:hover {
  transform: translateY(-1px);
  border-color: rgba(123,102,255,.62);
  background: linear-gradient(135deg, rgba(59,130,246,.76), rgb(124 58 237 / .76), rgb(192 38 211 / .72));
  box-shadow: 0 0 20px rgb(124 58 237 / .23);
}
.px-media-lightbox__tools .px-icon {
  width: 18px;
  height: 18px;
}
.px-media-lightbox__tools [data-lightbox-zoom-label] {
  min-width: 54px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.px-media-lightbox__viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 45%, rgb(var(--px-media-rgb, 123 63 242) / .12), transparent 48%),
    rgba(5,8,18,.66);
  box-shadow: 0 26px 80px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.05);
  cursor: zoom-in;
  touch-action: none;
}
.px-media-lightbox__viewport.is-zoomed {
  cursor: grab;
}
.px-media-lightbox__viewport.is-dragging {
  cursor: grabbing;
}
.px-media-lightbox__viewport img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform-origin: center center;
  will-change: auto;
  transition: transform .16s ease;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.px-media-lightbox__viewport.is-dragging img,
.px-media-lightbox__viewport.is-gesturing img {
  will-change: transform;
}
.px-media-lightbox__viewport.is-dragging img {
  transition: none;
}
body.px-lightbox-open {
  overflow: hidden !important;
}

@media (max-width: 760px) {
  .promxai-prompt-focus .px-related-grid-section {
    padding: 14px !important;
  }
  .promxai-prompt-focus .px-related-grid-section .px-related-strip {
    gap: 9px !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — stable media stage + corrected full-screen viewer
   ======================================================================== */

/* Keep the complete media experience visible while the information column
   continues down to the related 2x6 grid. The sticky boundary remains the
   detail grid, so the media releases naturally at the end of the page. */
@media (min-width: 981px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-media {
    align-self: start !important;
    position: relative !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-shell {
    position: sticky !important;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 12px) !important;
    z-index: 12 !important;
    width: 100% !important;
  }
}

/* Full-screen viewer starts with the complete image fitted inside the
   available screen. The toolbar floats above the canvas rather than reducing
   or distorting its fit area. */
.px-media-lightbox {
  padding: 0 !important;
}
.px-media-lightbox__panel {
  position: relative !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  padding: 0 !important;
  display: block !important;
}
.px-media-lightbox__tools {
  position: absolute !important;
  z-index: 5 !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  justify-self: auto !important;
}
.px-media-lightbox__viewport {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(68px, 9dvh, 92px) clamp(14px, 2.5vw, 38px) clamp(14px, 2.5vh, 28px) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.px-media-lightbox__viewport img {
  flex: 0 0 auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - clamp(28px, 5vw, 76px)) !important;
  max-height: calc(100dvh - clamp(92px, 13dvh, 126px)) !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  transform-origin: center center !important;
}
.px-media-lightbox__viewport::after {
  content: "اسحب الصورة بعد التكبير • عجلة الماوس للتحريك";
  position: absolute;
  z-index: 2;
  inset-inline-start: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: rgba(248,250,252,.72);
  background: rgba(15,23,42,.46);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.px-media-lightbox__viewport.is-zoomed::after {
  opacity: 1;
}

@media (max-width: 760px) {
  /* Phone viewer: gestures are primary. Keep only close + live scale label. */
  .px-media-lightbox__panel {
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
  }
  .px-media-lightbox__tools {
    top: max(12px, env(safe-area-inset-top)) !important;
    gap: 8px !important;
    min-height: 50px !important;
    padding: 6px 10px !important;
  }
  .px-media-lightbox__tools button {
    width: 40px !important;
    height: 40px !important;
  }
  .px-media-lightbox__tools [data-lightbox-zoom-in],
  .px-media-lightbox__tools [data-lightbox-zoom-out],
  .px-media-lightbox__tools [data-lightbox-reset] {
    display: none !important;
  }
  .px-media-lightbox__tools [data-lightbox-zoom-label] {
    min-width: 64px !important;
    font-size: 14px !important;
  }
  .px-media-lightbox__tools::after {
    content: "قرّب بإصبعين";
    color: rgba(248,250,252,.72);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }
  .px-media-lightbox__viewport {
    padding: 70px 8px max(16px, env(safe-area-inset-bottom)) !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
  }
  .px-media-lightbox__viewport img {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 92px - env(safe-area-inset-bottom)) !important;
    transition: transform .12s ease !important;
  }
  .px-media-lightbox__viewport.is-gesturing img,
  .px-media-lightbox__viewport.is-dragging img {
    transition: none !important;
  }
  .px-media-lightbox__viewport::after {
    content: "اسحب للتنقل • قرّب بإصبعين";
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    opacity: 1;
  }
  .px-media-lightbox__viewport.is-zoomed::after {
    content: "اسحب لتحريك الصورة • قرّب بإصبعين";
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — viewport-fit media stage + fixed five references
   ======================================================================== */
@media (min-width: 981px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    --px-1319-top-offset: calc(var(--wp-admin--admin-bar--height, 0px) + 10px);
    --px-1319-stage-height: min(790px, calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 22px));
    --px-1319-image-height: min(720px, calc(var(--px-1319-stage-height) - 68px));
    --px-139-stage-height: var(--px-1319-stage-height);
    --px-1310-image-height: var(--px-1319-image-height);
    --px-139-rail-width: clamp(112px, 8.4vw, 136px);
    --px-139-gap: clamp(14px, 1.5vw, 22px);
  }

  /* The complete left experience stays together: toolbar, main image,
     navigation arrows, and five reference images. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-media {
    position: relative !important;
    align-self: start !important;
    min-width: 0 !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-shell {
    position: sticky !important;
    top: var(--px-1319-top-offset) !important;
    width: 100% !important;
    height: var(--px-1319-stage-height) !important;
    min-height: var(--px-1319-stage-height) !important;
    max-height: var(--px-1319-stage-height) !important;
    overflow: visible !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-toolbar {
    top: 4px !important;
    right: 8px !important;
    max-width: calc(100% - 16px) !important;
    padding: 5px !important;
    gap: 6px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-viewer {
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    grid-template-columns: minmax(0, 1fr) var(--px-139-rail-width) !important;
    gap: var(--px-139-gap) !important;
    padding: 52px clamp(12px, 1.7vw, 26px) 12px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-main {
    min-height: var(--px-1319-image-height) !important;
    height: var(--px-1319-image-height) !important;
    max-height: var(--px-1319-image-height) !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, auto) 44px !important;
    column-gap: clamp(11px, 1.15vw, 16px) !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-main-visual {
    width: calc(var(--px-1319-image-height) * 9 / 16) !important;
    min-width: 0 !important;
    max-width: min(100%, calc(var(--px-1319-image-height) * 9 / 16)) !important;
    height: var(--px-1319-image-height) !important;
    min-height: auto !important;
    max-height: var(--px-1319-image-height) !important;
    aspect-ratio: 9 / 16 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-main-visual img[data-main-image],
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-main-visual video[data-main-video] {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 26px !important;
  }

  /* Navigation controls sit outside the artwork at equal distances. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-main > .px-gallery-arrow {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: center !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-main > .px-gallery-arrow--prev {
    transform: rotate(180deg) !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-main > .px-gallery-arrow--next {
    transform: none !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-main > .px-gallery-arrow--prev:hover {
    transform: rotate(180deg) scale(1.04) !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-main > .px-gallery-arrow--next:hover {
    transform: scale(1.04) !important;
  }

  /* Five visible samples exactly match the top and bottom of the main image. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-rail {
    width: var(--px-139-rail-width) !important;
    min-width: var(--px-139-rail-width) !important;
    max-width: var(--px-139-rail-width) !important;
    height: var(--px-1319-image-height) !important;
    min-height: var(--px-1319-image-height) !important;
    max-height: var(--px-1319-image-height) !important;
    align-self: center !important;
    overflow: visible !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-thumbs {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    display: grid !important;
    grid-template-rows: repeat(var(--px-visible-thumb-count, 5), minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
    overflow: visible !important;
    scrollbar-width: none !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-thumbs::-webkit-scrollbar {
    display: none !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-thumb {
    width: 100% !important;
    height: 100% !important;
    min-height: auto !important;
    max-height: none !important;
    border-radius: 20px !important;
    overflow: visible !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    --px-1319-stage-height: min(720px, calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 18px));
    --px-1319-image-height: min(650px, calc(var(--px-1319-stage-height) - 62px));
    --px-139-stage-height: var(--px-1319-stage-height);
    --px-1310-image-height: var(--px-1319-image-height);
    --px-139-rail-width: clamp(98px, 11vw, 118px);
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-viewer {
    padding: 48px 12px 10px !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-main {
    grid-template-columns: 40px minmax(0, auto) 40px !important;
    column-gap: 10px !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-main > .px-gallery-arrow {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — five-reference vertical alignment + mobile scene sync
   ======================================================================== */
@media (min-width: 761px) {
  /* Force the five visible references into one vertical column. Earlier
     generic gallery rules may define columns, so reset all grid axes here. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-rail {
    display: block !important;
    align-self: center !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-thumbs,
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-thumbs.px-visual-thumbs {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(var(--px-visible-thumb-count, 5), minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    align-content: stretch !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: clamp(8px, 1.05vh, 12px) !important;
    height: var(--px-1319-image-height) !important;
    min-height: var(--px-1319-image-height) !important;
    max-height: var(--px-1319-image-height) !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-thumb,
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-thumb.px-visual-thumb {
    display: block !important;
    grid-column: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: clamp(15px, 1.25vw, 21px) !important;
    overflow: visible !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

@media (max-width: 760px) {
  /* Scene buttons control the mobile hero gallery; keep the interaction
     obvious and prevent browser tap delay. */
  .promxai-prompt-focus .px-prompt-scene-button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — approved larger-left gallery layout
   - larger hero image with stronger presence
   - five visible glass thumbnails in one vertical rail only
   - paged 1–5 / 6–10 thumbnail window
   - wider right content column (≈ 34%)
   - desktop sticky left stage + improved mobile prompt-to-image sync
   ======================================================================== */
.promxai-prompt-focus .px-prompt-detail-140 {
  --px-1321-hero-height: clamp(520px, calc(100svh - 142px), 810px);
  --px-139-stage-height: calc(var(--px-1321-hero-height) + 72px);
  --px-139-rail-width: clamp(118px, 8.6vw, 138px);
}

@media (min-width: 761px) {
  .promxai-prompt-focus .px-detail-139-grid {
    grid-template-columns: minmax(0, 1.58fr) minmax(360px, 0.92fr) !important;
    gap: clamp(18px, 2vw, 28px) !important;
    align-items: start !important;
  }

  .promxai-prompt-focus .px-detail-139-media {
    position: sticky !important;
    top: 12px !important;
    align-self: start !important;
  }

  .promxai-prompt-focus .px-detail-139-toolbar {
    top: -10px !important;
    right: 14px !important;
  }

  .promxai-prompt-focus .px-detail-139-viewer {
    min-height: var(--px-139-stage-height) !important;
    padding-top: 42px !important;
    padding-bottom: 10px !important;
    padding-left: 4px !important;
    padding-right: 8px !important;
    grid-template-columns: minmax(0, 1fr) var(--px-139-rail-width) !important;
    gap: clamp(14px, 1.6vw, 22px) !important;
    align-items: center !important;
  }

  .promxai-prompt-focus .px-detail-139-main {
    min-height: var(--px-1321-hero-height) !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, auto) 52px !important;
    align-items: center !important;
    justify-content: start !important;
    column-gap: clamp(14px, 1.3vw, 20px) !important;
    padding-left: 2px !important;
    margin-right: auto !important;
  }

  .promxai-prompt-focus .px-detail-139-main-visual {
    width: calc(var(--px-1321-hero-height) * 9 / 16) !important;
    max-width: calc(var(--px-1321-hero-height) * 9 / 16) !important;
    height: var(--px-1321-hero-height) !important;
    max-height: var(--px-1321-hero-height) !important;
    min-height: auto !important;
    margin: 0 !important;
  }

  .promxai-prompt-focus .px-detail-139-main::before {
    width: min(86%, 700px) !important;
    height: min(90%, 860px) !important;
  }

  .promxai-prompt-focus .px-detail-139-main-visual img[data-main-image],
  .promxai-prompt-focus .px-detail-139-main-visual video[data-main-video] {
    border-radius: 28px !important;
    box-shadow: 0 32px 72px rgba(3,7,17,.34), 0 0 0 1px rgba(255,255,255,.08), 0 0 34px rgb(var(--px-media-rgb) / .14) !important;
  }

  .promxai-prompt-focus .px-detail-139-main > .px-gallery-arrow {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    justify-self: center !important;
  }

  .promxai-prompt-focus .px-detail-139-rail {
    width: var(--px-139-rail-width) !important;
    min-width: var(--px-139-rail-width) !important;
    max-width: var(--px-139-rail-width) !important;
    height: var(--px-1321-hero-height) !important;
    min-height: var(--px-1321-hero-height) !important;
    max-height: var(--px-1321-hero-height) !important;
    align-self: center !important;
    overflow: visible !important;
  }

  .promxai-prompt-focus .px-detail-139-thumbs,
  .promxai-prompt-focus .px-detail-139-thumbs.px-visual-thumbs {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 0 !important;
    overflow: visible !important;
    scrollbar-width: none !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb,
  .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb {
    position: relative !important;
    flex: 0 0 var(--px-thumb-size, 120px) !important;
    width: 100% !important;
    height: var(--px-thumb-size, 120px) !important;
    min-height: var(--px-thumb-size, 120px) !important;
    max-height: var(--px-thumb-size, 120px) !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(26,33,51,.78), rgba(9,14,24,.68)) !important;
    opacity: .9 !important;
    box-shadow: 0 10px 22px rgba(3,7,17,.16), inset 0 1px 0 rgba(255,255,255,.05) !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease, background .18s ease !important;
    outline: none !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb,
  html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb {
    border-color: rgba(92,108,145,.16) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,245,255,.84)) !important;
    box-shadow: 0 10px 22px rgba(103,117,151,.12), inset 0 1px 0 rgba(255,255,255,.94) !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb::after,
  .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 8px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #3b82f6, #7c3aed, #c026d3);
    opacity: 0;
    transform: scaleX(.42);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
  }

  .promxai-prompt-focus .px-detail-139-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
    filter: saturate(.9) brightness(.96) !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb:hover,
  .promxai-prompt-focus .px-detail-139-thumb:focus-visible {
    transform: translateY(-1px) !important;
    border-color: rgb(var(--px-media-rgb) / .34) !important;
    opacity: .98 !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb.is-active,
  .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb.is-active {
    border-color: rgb(var(--px-media-rgb) / .52) !important;
    background: linear-gradient(180deg, rgba(34,44,69,.92), rgba(11,17,29,.82)) !important;
    opacity: 1 !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 0 3px rgb(var(--px-media-rgb) / .16), 0 0 24px rgb(var(--px-media-rgb) / .18), 0 14px 28px rgba(3,7,17,.22) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb.is-active,
  html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb.is-active {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,255,.92)) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.74), 0 0 0 3px rgb(var(--px-media-rgb) / .14), 0 0 24px rgb(var(--px-media-rgb) / .10), 0 14px 28px rgba(103,117,151,.16) !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb.is-active::after,
  .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb.is-active::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-column {
    width: 100% !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-copy-card,
  .promxai-prompt-focus .px-prompt-detail-140 .px-related-inline {
    border-radius: 26px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head h1 {
    font-size: clamp(30px, 2.65vw, 46px) !important;
  }

  .promxai-prompt-focus .px-prompt-scene-switcher {
    gap: 10px !important;
  }
  .promxai-prompt-focus .px-prompt-scene-button {
    min-height: 46px !important;
    font-size: 13px !important;
    padding-inline: 10px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    --px-1321-hero-height: clamp(470px, calc(100svh - 152px), 710px);
    --px-139-rail-width: clamp(110px, 11vw, 128px);
  }
  .promxai-prompt-focus .px-detail-139-grid {
    grid-template-columns: minmax(0, 1.44fr) minmax(320px, 0.88fr) !important;
  }
  .promxai-prompt-focus .px-detail-139-main {
    grid-template-columns: 46px minmax(0, auto) 46px !important;
    column-gap: 12px !important;
  }
  .promxai-prompt-focus .px-detail-139-main > .px-gallery-arrow {
    width: 46px !important;
    min-width: 42px !important;
    height: 46px !important;
    min-height: 46px !important;
  }
}

@media (max-width: 760px) {
  .promxai-prompt-focus .px-prompt-scene-button {
    min-width: 124px !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — fixed five-slot rolling thumbnail rail
   ======================================================================== */
@media (min-width: 761px) {
  .promxai-prompt-focus .px-detail-139-viewer {
    padding-top: 20px !important;
  }

  .promxai-prompt-focus .px-detail-139-main,
  .promxai-prompt-focus .px-detail-139-rail {
    transform: translateY(-18px) !important;
  }

  .promxai-prompt-focus .px-detail-139-thumbs,
  .promxai-prompt-focus .px-detail-139-thumbs.px-visual-thumbs {
    justify-content: center !important;
    gap: 12px !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb,
  .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb {
    flex: 0 0 var(--px-thumb-size, 108px) !important;
    height: var(--px-thumb-size, 108px) !important;
    min-height: var(--px-thumb-size, 108px) !important;
    max-height: var(--px-thumb-size, 108px) !important;
  }

  .promxai-prompt-focus .px-detail-139-toolbar {
    top: -16px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .promxai-prompt-focus .px-detail-139-main,
  .promxai-prompt-focus .px-detail-139-rail {
    transform: translateY(-12px) !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — professional prompt-detail layout aligned to the
   approved reference structure. This layer intentionally changes layout only.
   ======================================================================== */
.promxai-prompt-focus .px-prompt-detail-140 {
  --px-1323-hero-height: clamp(560px, calc(100svh - 128px), 820px);
  --px-1323-rail-width: clamp(118px, 8.4vw, 142px);
  --px-1323-layout-gap: clamp(20px, 2vw, 34px);
  --px-139-stage-height: calc(var(--px-1323-hero-height) + 66px);
  --px-139-rail-width: var(--px-1323-rail-width);
  width: min(1680px, calc(100% - 20px)) !important;
  max-width: 1680px !important;
}

@media (min-width: 761px) {
  /* Main page balance: media ≈ 65%, information ≈ 35%. */
  .promxai-prompt-focus .px-detail-139-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(390px, .96fr) !important;
    gap: var(--px-1323-layout-gap) !important;
    align-items: start !important;
  }

  /* Keep the approved media workspace together while the right panel scrolls. */
  .promxai-prompt-focus .px-detail-139-media {
    position: sticky !important;
    top: 10px !important;
    align-self: start !important;
  }

  .admin-bar.promxai-prompt-focus .px-detail-139-media {
    top: 42px !important;
  }

  .promxai-prompt-focus .px-detail-139-shell {
    min-height: var(--px-139-stage-height) !important;
  }

  /* Toolbar sits directly above the five-reference rail. */
  .promxai-prompt-focus .px-detail-139-toolbar {
    top: -4px !important;
    right: 0 !important;
    gap: 5px !important;
    padding: 5px !important;
    min-height: 40px !important;
    max-width: calc(var(--px-1323-rail-width) + 250px) !important;
  }

  .promxai-prompt-focus .px-detail-139-viewer {
    min-height: var(--px-139-stage-height) !important;
    padding: 38px 0 4px !important;
    grid-template-columns: minmax(0, 1fr) var(--px-1323-rail-width) !important;
    gap: clamp(18px, 1.6vw, 26px) !important;
    align-items: start !important;
  }

  /* Larger hero image, shifted toward the left edge. */
  .promxai-prompt-focus .px-detail-139-main {
    min-height: var(--px-1323-hero-height) !important;
    display: grid !important;
    grid-template-columns: 50px minmax(0, auto) 50px !important;
    column-gap: clamp(14px, 1.35vw, 20px) !important;
    justify-content: start !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: translate(-10px, -8px) !important;
  }

  .promxai-prompt-focus .px-detail-139-main-visual {
    width: calc(var(--px-1323-hero-height) * 9 / 16) !important;
    max-width: calc(var(--px-1323-hero-height) * 9 / 16) !important;
    height: var(--px-1323-hero-height) !important;
    min-height: auto !important;
    max-height: var(--px-1323-hero-height) !important;
    margin: 0 !important;
    border-radius: 30px !important;
  }

  .promxai-prompt-focus .px-detail-139-main-visual img[data-main-image],
  .promxai-prompt-focus .px-detail-139-main-visual video[data-main-video] {
    border-radius: 28px !important;
    object-fit: contain !important;
    object-position: center !important;
    box-shadow:
      0 34px 76px rgba(3,7,17,.28),
      0 0 0 1px rgba(255,255,255,.08),
      0 0 30px rgb(var(--px-media-rgb) / .13) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-detail-139-main-visual img[data-main-image],
  html[data-theme="light"] .promxai-prompt-focus .px-detail-139-main-visual video[data-main-video] {
    box-shadow:
      0 30px 64px rgba(100,115,151,.18),
      0 0 0 1px rgba(255,255,255,.88),
      0 0 26px rgb(var(--px-media-rgb) / .08) !important;
  }

  /* Navigation arrows remain outside the hero frame. */
  .promxai-prompt-focus .px-detail-139-main > .px-gallery-arrow {
    position: relative !important;
    inset: auto !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    justify-self: center !important;
    align-self: center !important;
  }

  /* Five equal square samples below the toolbar. */
  .promxai-prompt-focus .px-detail-139-rail {
    width: var(--px-1323-rail-width) !important;
    min-width: var(--px-1323-rail-width) !important;
    max-width: var(--px-1323-rail-width) !important;
    height: var(--px-1323-hero-height) !important;
    min-height: var(--px-1323-hero-height) !important;
    max-height: var(--px-1323-hero-height) !important;
    align-self: start !important;
    overflow: visible !important;
    transform: translateY(-8px) !important;
  }

  .promxai-prompt-focus .px-detail-139-thumbs,
  .promxai-prompt-focus .px-detail-139-thumbs.px-visual-thumbs {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 14px !important;
    overflow: visible !important;
    scrollbar-width: none !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb[hidden],
  .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb[hidden] {
    display: none !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb,
  .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb {
    position: relative !important;
    flex: 0 0 var(--px-thumb-size, 112px) !important;
    width: 100% !important;
    height: var(--px-thumb-size, 112px) !important;
    min-height: var(--px-thumb-size, 112px) !important;
    max-height: var(--px-thumb-size, 112px) !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(22,29,47,.88), rgba(7,12,22,.78)) !important;
    opacity: .74 !important;
    box-shadow: 0 12px 24px rgba(3,7,17,.16), inset 0 1px 0 rgba(255,255,255,.05) !important;
    outline: none !important;
    transition: opacity .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb,
  html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb {
    border-color: rgba(87,103,140,.14) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,246,253,.88)) !important;
    opacity: .82 !important;
    box-shadow: 0 11px 22px rgba(103,117,151,.11), inset 0 1px 0 rgba(255,255,255,.94) !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
    filter: saturate(.88) brightness(.92) !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb::after,
  .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 8px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #3b82f6, #7c3aed, #c026d3);
    opacity: 0;
    transform: scaleX(.45);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
  }

  .promxai-prompt-focus .px-detail-139-thumb:hover,
  .promxai-prompt-focus .px-detail-139-thumb:focus-visible {
    opacity: .92 !important;
    transform: translateY(-2px) !important;
    border-color: rgb(var(--px-media-rgb) / .34) !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb.is-active,
  .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb.is-active {
    opacity: 1 !important;
    border-color: rgb(var(--px-media-rgb) / .60) !important;
    background: linear-gradient(180deg, rgba(30,39,64,.96), rgba(9,15,27,.92)) !important;
    box-shadow:
      0 0 0 3px rgb(var(--px-media-rgb) / .16),
      0 0 24px rgb(var(--px-media-rgb) / .19),
      0 14px 28px rgba(3,7,17,.20) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb.is-active,
  html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb.is-active {
    background: linear-gradient(180deg, #fff, #f6f8ff) !important;
    box-shadow:
      0 0 0 3px rgb(var(--px-media-rgb) / .14),
      0 0 22px rgb(var(--px-media-rgb) / .10),
      0 14px 26px rgba(103,117,151,.14) !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb.is-active img {
    filter: saturate(1.03) brightness(1) !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb.is-active::after,
  .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb.is-active::after {
    opacity: 1;
    transform: scaleX(1);
  }

  /* Right card keeps the approved data design, with more breathing room. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-column {
    width: 100% !important;
    min-width: 0 !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-copy-card,
  .promxai-prompt-focus .px-prompt-detail-140 .px-related-inline {
    border-radius: 28px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head h1 {
    font-size: clamp(31px, 2.65vw, 47px) !important;
    line-height: 1.22 !important;
  }

  .promxai-prompt-focus .px-prompt-scene-switcher {
    gap: 3px !important;
    padding: 7px !important;
  }

  .promxai-prompt-focus .px-prompt-scene-button {
    min-height: 48px !important;
    padding: 9px 8px 12px !important;
    font-size: 12.5px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    --px-1323-hero-height: clamp(500px, calc(100svh - 142px), 720px);
    --px-1323-rail-width: clamp(108px, 10.4vw, 126px);
  }

  .promxai-prompt-focus .px-detail-139-grid {
    grid-template-columns: minmax(0, 1.48fr) minmax(330px, .92fr) !important;
    gap: 18px !important;
  }

  .promxai-prompt-focus .px-detail-139-main {
    grid-template-columns: 44px minmax(0, auto) 44px !important;
    column-gap: 11px !important;
    transform: translate(-4px, -6px) !important;
  }

  .promxai-prompt-focus .px-detail-139-main > .px-gallery-arrow {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 760px) {
  /* Mobile stays stacked and swipe-first. No desktop sticky/grid overrides. */
  .promxai-prompt-focus .px-prompt-detail-140 {
    width: calc(100% - 12px) !important;
  }

  .promxai-prompt-focus .px-prompt-scene-switcher {
    scroll-snap-type: x proximity !important;
  }

  .promxai-prompt-focus .px-prompt-scene-button {
    scroll-snap-align: start !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — toolbar/title-card top alignment
   Scope: visual alignment only. No gallery, prompt, PRO, mobile, or data logic.
   ======================================================================== */
@media (min-width: 761px) {
  /* The media toolbar now starts on the same horizontal line as the top edge
     of the product-title card in the information column. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-shell {
    overflow: visible !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-toolbar {
    top: -62px !important;
    right: 0 !important;
    margin: 0 !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-toolbar {
    top: -54px !important;
  }
}

@media (max-width: 760px) {
  /* Keep the approved mobile stacked toolbar untouched. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-toolbar {
    top: auto !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — focused prompt-detail composition rebuild
   Scope is deliberately limited to the desktop prompt-detail upper workspace.
   ======================================================================== */
@media (min-width: 761px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    --px-1325-hero-height: clamp(540px, calc(100svh - 112px), 760px);
    --px-1325-rail-width: clamp(112px, 8.2vw, 132px);
    --px-1325-toolbar-height: 44px;
    --px-1325-top-gap: 18px;
  }

  /* A stable 64/36 split leaves the prompt labels enough room without
     reducing the approved image presence. */
  .promxai-prompt-focus .px-detail-139-grid {
    grid-template-columns: minmax(0, 1.58fr) minmax(430px, .92fr) !important;
    gap: clamp(20px, 2vw, 30px) !important;
    align-items: start !important;
  }

  .promxai-prompt-focus .px-detail-139-media {
    position: sticky !important;
    top: 10px !important;
    align-self: start !important;
  }

  .admin-bar.promxai-prompt-focus .px-detail-139-media {
    top: 42px !important;
  }

  .promxai-prompt-focus .px-detail-139-shell {
    min-height: calc(var(--px-1325-hero-height) + var(--px-1325-toolbar-height) + var(--px-1325-top-gap)) !important;
    overflow: visible !important;
  }

  /* Toolbar starts exactly at the shell/title-card top. It floats above the
     reference rail but is wide enough for all controls without collision. */
  .promxai-prompt-focus .px-detail-139-toolbar,
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-toolbar {
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    width: max-content !important;
    max-width: min(100%, 430px) !important;
    min-height: var(--px-1325-toolbar-height) !important;
    margin: 0 !important;
    padding: 5px !important;
    gap: 5px !important;
    z-index: 30 !important;
  }

  /* The viewer begins below the toolbar. Hero and samples are separate peers,
     so changing the rail no longer pushes the main image downward. */
  .promxai-prompt-focus .px-detail-139-viewer {
    min-height: calc(var(--px-1325-hero-height) + var(--px-1325-toolbar-height) + var(--px-1325-top-gap)) !important;
    padding: calc(var(--px-1325-toolbar-height) + var(--px-1325-top-gap)) 0 0 !important;
    grid-template-columns: minmax(0, 1fr) var(--px-1325-rail-width) !important;
    gap: clamp(18px, 1.6vw, 24px) !important;
    align-items: start !important;
  }

  /* Hero is raised and centred inside the left visual half. */
  .promxai-prompt-focus .px-detail-139-main {
    min-height: var(--px-1325-hero-height) !important;
    height: var(--px-1325-hero-height) !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, auto) 48px !important;
    column-gap: clamp(14px, 1.3vw, 20px) !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: translate(-6px, -12px) !important;
  }

  .promxai-prompt-focus .px-detail-139-main-visual {
    width: calc(var(--px-1325-hero-height) * 9 / 16) !important;
    max-width: calc(var(--px-1325-hero-height) * 9 / 16) !important;
    height: var(--px-1325-hero-height) !important;
    min-height: auto !important;
    max-height: var(--px-1325-hero-height) !important;
    margin: 0 !important;
    border-radius: 30px !important;
  }

  .promxai-prompt-focus .px-detail-139-main-visual img[data-main-image],
  .promxai-prompt-focus .px-detail-139-main-visual video[data-main-video] {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 28px !important;
  }

  .promxai-prompt-focus .px-detail-139-main > .px-gallery-arrow {
    position: relative !important;
    inset: auto !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    justify-self: center !important;
    align-self: center !important;
  }

  /* Five samples are a self-contained rail directly below the toolbar. */
  .promxai-prompt-focus .px-detail-139-rail {
    width: var(--px-1325-rail-width) !important;
    min-width: var(--px-1325-rail-width) !important;
    max-width: var(--px-1325-rail-width) !important;
    height: var(--px-1325-hero-height) !important;
    min-height: var(--px-1325-hero-height) !important;
    max-height: var(--px-1325-hero-height) !important;
    margin: 0 !important;
    transform: translateY(-12px) !important;
    align-self: start !important;
    overflow: visible !important;
  }

  .promxai-prompt-focus .px-detail-139-thumbs,
  .promxai-prompt-focus .px-detail-139-thumbs.px-visual-thumbs {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb,
  .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb {
    flex: 0 0 var(--px-thumb-size, 108px) !important;
    width: 100% !important;
    height: var(--px-thumb-size, 108px) !important;
    min-height: var(--px-thumb-size, 108px) !important;
    max-height: var(--px-thumb-size, 108px) !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* Full scene names: no ellipsis, no clipped words. */
  .promxai-prompt-focus .px-prompt-scene-switcher {
    display: grid !important;
    grid-template-columns: repeat(var(--px-scene-count, 5), minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 7px !important;
    align-items: stretch !important;
  }

  .promxai-prompt-focus .px-prompt-scene-button {
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 8px 6px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-height: 1.32 !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .promxai-prompt-focus .px-prompt-scene-button .px-lang-ar,
  .promxai-prompt-focus .px-prompt-scene-button .px-lang-en {
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: inherit !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    --px-1325-hero-height: clamp(500px, calc(100svh - 118px), 680px);
    --px-1325-rail-width: clamp(104px, 9.8vw, 120px);
  }

  .promxai-prompt-focus .px-detail-139-grid {
    grid-template-columns: minmax(0, 1.44fr) minmax(360px, .92fr) !important;
    gap: 18px !important;
  }

  .promxai-prompt-focus .px-detail-139-main {
    grid-template-columns: 42px minmax(0, auto) 42px !important;
    column-gap: 11px !important;
    transform: translate(-2px, -10px) !important;
  }

  .promxai-prompt-focus .px-detail-139-main > .px-gallery-arrow {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 42px !important;
  }

  .promxai-prompt-focus .px-prompt-scene-button {
    min-height: 56px !important;
    font-size: 11.5px !important;
    padding-inline: 4px !important;
  }
}

@media (max-width: 760px) {
  /* Mobile behavior and previously approved swipe layout are untouched. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-toolbar {
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — final top-stage optical alignment
   Scope intentionally limited to desktop prompt-detail alignment only.
   ======================================================================== */
@media (min-width: 761px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    --px-1326-toolbar-lift: 38px;
    --px-1326-hero-lift: 8px;
  }

  /* Lift only the icon pill. The viewer and the reference rail keep their
     own layout coordinates, preventing the previous chain reaction where
     moving the toolbar also pushed the hero and samples down. */
  .promxai-prompt-focus .px-detail-139-toolbar,
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-toolbar {
    top: calc(-1 * var(--px-1326-toolbar-lift)) !important;
    right: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Raise the approved 9:16 hero by a subtle optical amount only. */
  .promxai-prompt-focus .px-detail-139-main {
    transform: translate(-6px, calc(-12px - var(--px-1326-hero-lift))) !important;
  }

  /* Five fixed slots remain the sizing reference even when only 1–4 images
     exist. Larger spacing reduces the thumbnail size by roughly 4–5% while
     keeping the group vertically centred. */
  .promxai-prompt-focus .px-detail-139-thumbs,
  .promxai-prompt-focus .px-detail-139-thumbs.px-visual-thumbs {
    gap: 18px !important;
    justify-content: center !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb,
  .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb {
    border-radius: 18px !important;
  }

  .promxai-prompt-focus .px-detail-139-thumb img {
    border-radius: inherit !important;
  }

  /* Preserve every scene label in full. Arabic labels may wrap naturally to
     two lines; ellipsis and clipping are explicitly disabled. */
  .promxai-prompt-focus .px-prompt-scene-switcher {
    overflow: visible !important;
  }

  .promxai-prompt-focus .px-prompt-scene-button {
    min-height: 66px !important;
    padding: 9px 5px 13px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    line-height: 1.28 !important;
    font-size: 12px !important;
  }

  .promxai-prompt-focus .px-prompt-scene-button .px-lang-ar,
  .promxai-prompt-focus .px-prompt-scene-button .px-lang-en {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    --px-1326-toolbar-lift: 32px;
    --px-1326-hero-lift: 6px;
  }

  .promxai-prompt-focus .px-detail-139-main {
    transform: translate(-2px, calc(-10px - var(--px-1326-hero-lift))) !important;
  }

  .promxai-prompt-focus .px-detail-139-thumbs,
  .promxai-prompt-focus .px-detail-139-thumbs.px-visual-thumbs {
    gap: 15px !important;
  }

  .promxai-prompt-focus .px-prompt-scene-button {
    min-height: 64px !important;
    font-size: 11.2px !important;
    padding-inline: 4px !important;
  }
}

@media (max-width: 760px) {
  /* Mobile remains exactly on the previously approved swipe layout. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-toolbar {
    top: auto !important;
    right: auto !important;
    transform: none !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — cross-browser stable prompt stage
   Scope: desktop prompt-detail only. No functional systems are changed.
   ======================================================================== */
@media (min-width: 761px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    /* Width-based sizing is more stable across Chrome/Edge than viewport-height
       calculations affected by browser chrome and the WordPress admin bar. */
    --px-1327-hero-height: clamp(520px, 43.5vw, 748px);
    --px-1327-rail-width: clamp(104px, 8vw, 122px);
    --px-1327-stage-lift: 18px;
  }

  .promxai-prompt-focus .px-detail-139-grid {
    grid-template-columns: minmax(0, 1.54fr) minmax(390px, .96fr) !important;
    gap: clamp(18px, 1.7vw, 28px) !important;
  }

  /* Move the media stage and tools together, avoiding the detached toolbar
     behavior seen in one browser. */
  .promxai-prompt-focus .px-detail-139-media {
    transform: translateY(calc(-1 * var(--px-1327-stage-lift))) !important;
  }

  .promxai-prompt-focus .px-detail-139-toolbar,
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-toolbar {
    top: 0 !important;
    right: 0 !important;
    transform: translateY(-4px) !important;
    margin: 0 !important;
  }

  .promxai-prompt-focus .px-detail-139-viewer {
    min-height: calc(var(--px-1327-hero-height) + 54px) !important;
    padding-top: 34px !important;
  }

  .promxai-prompt-focus .px-detail-139-main {
    min-height: var(--px-1327-hero-height) !important;
    transform: translate(-4px, 0) !important;
  }

  .promxai-prompt-focus .px-detail-139-main-visual {
    width: calc(var(--px-1327-hero-height) * 9 / 16) !important;
    max-width: calc(var(--px-1327-hero-height) * 9 / 16) !important;
    height: var(--px-1327-hero-height) !important;
    max-height: var(--px-1327-hero-height) !important;
  }

  .promxai-prompt-focus .px-detail-139-rail {
    width: var(--px-1327-rail-width) !important;
    min-width: var(--px-1327-rail-width) !important;
    max-width: var(--px-1327-rail-width) !important;
    height: var(--px-1327-hero-height) !important;
    min-height: var(--px-1327-hero-height) !important;
    max-height: var(--px-1327-hero-height) !important;
    transform: none !important;
    align-self: start !important;
  }

  .promxai-prompt-focus .px-detail-139-thumbs,
  .promxai-prompt-focus .px-detail-139-thumbs.px-visual-thumbs {
    gap: 13px !important;
    justify-content: center !important;
  }

  /* Compact scene tabs with one language only. */
  .promxai-prompt-focus .px-prompt-scene-switcher {
    grid-template-columns: repeat(var(--px-scene-count, 5), minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 6px !important;
    overflow: visible !important;
  }

  .promxai-prompt-focus .px-prompt-scene-button {
    min-height: 48px !important;
    padding: 7px 4px 10px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* The earlier per-component rule used display:block!important on both
     language spans, overriding the global language switch. Restore a strict
     one-language-only contract inside scene tabs. */
  .promxai-prompt-focus .px-prompt-scene-button .px-lang-en {
    display: none !important;
  }
  .promxai-prompt-focus .px-prompt-scene-button .px-lang-ar {
    display: inline !important;
    width: auto !important;
    white-space: nowrap !important;
  }
  html[data-ui-lang="en"] .promxai-prompt-focus .px-prompt-scene-button .px-lang-ar {
    display: none !important;
  }
  html[data-ui-lang="en"] .promxai-prompt-focus .px-prompt-scene-button .px-lang-en {
    display: inline !important;
    width: auto !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    --px-1327-hero-height: clamp(490px, 47vw, 650px);
    --px-1327-rail-width: clamp(98px, 9vw, 114px);
    --px-1327-stage-lift: 14px;
  }
  .promxai-prompt-focus .px-detail-139-grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(350px, .94fr) !important;
  }
  .promxai-prompt-focus .px-prompt-scene-button {
    min-height: 44px !important;
    font-size: 11px !important;
    padding-inline: 3px !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — single-language scene labels + toolbar correction
   Scope: prompt scene labels and desktop toolbar vertical position only.
   ======================================================================== */
@media (min-width: 761px) {
  /* The label is now one DOM node, so Arabic and English can never render
     together. JavaScript changes its text when the interface language changes. */
  .promxai-prompt-focus .px-prompt-scene-button .px-prompt-scene-label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.15 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .promxai-prompt-focus .px-prompt-scene-switcher {
    gap: 7px !important;
    padding: 6px !important;
  }

  .promxai-prompt-focus .px-prompt-scene-button {
    min-height: 42px !important;
    padding: 7px 4px 10px !important;
    overflow: visible !important;
  }

  /* Lower the icon pill only. The hero image and thumbnail rail retain their
     approved coordinates. This prevents the toolbar from touching the top of
     the browser viewport while keeping it clearly above the thumbnails. */
  .promxai-prompt-focus .px-detail-139-toolbar,
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-toolbar {
    top: 16px !important;
    right: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .promxai-prompt-focus .px-detail-139-toolbar,
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-toolbar {
    top: 12px !important;
  }

  .promxai-prompt-focus .px-prompt-scene-button .px-prompt-scene-label {
    font-size: 11px !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — cache-safe scene labels + final toolbar position
   Scope: scene button labels and desktop toolbar vertical alignment only.
   ======================================================================== */
@media (min-width: 761px) {
  /* Any stale Arabic/English spans from cached markup are hidden. The new JS
     replaces them with one label node, but this is a defensive fallback. */
  .promxai-prompt-focus .px-prompt-scene-button > :not(.px-prompt-scene-label) {
    display: none !important;
  }

  .promxai-prompt-focus .px-prompt-scene-button .px-prompt-scene-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    direction: inherit !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .promxai-prompt-focus .px-prompt-scene-switcher {
    gap: 3px !important;
    padding: 6px !important;
  }

  .promxai-prompt-focus .px-prompt-scene-button {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 5px 5px !important;
    overflow: visible !important;
  }

  /* Lower the complete icon pill to the approved space above the thumbnails.
     Hero image, thumbnail rail and right information column remain untouched. */
  .promxai-prompt-focus .px-detail-139-toolbar,
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-toolbar {
    top: 30px !important;
    right: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .promxai-prompt-focus .px-detail-139-toolbar,
  .promxai-prompt-focus .px-prompt-detail-140 .px-detail-139-toolbar {
    top: 24px !important;
  }

  .promxai-prompt-focus .px-prompt-scene-button .px-prompt-scene-label {
    font-size: 11px !important;
  }
}

/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — clean media-side rebuild
   Replaces the accumulated desktop media overrides with an isolated layout.
   ======================================================================== */

@media (min-width: 761px) {
  .promxai-prompt-focus .px-prompt-detail-140 {
    width: min(100%, 1660px) !important;
    max-width: 1660px !important;
    padding-inline: clamp(18px, 2.2vw, 38px) !important;
  }

  .promxai-prompt-focus .px-detail-136-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.98fr) minmax(340px, .88fr) !important;
    gap: clamp(22px, 2.4vw, 40px) !important;
    align-items: start !important;
    direction: ltr !important;
  }

  .promxai-prompt-focus .px-detail-136-grid > .px-prompt-column {
    direction: rtl !important;
    min-width: 0 !important;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  
}

@media (min-width: 761px) and (max-width: 1180px) {
  .promxai-prompt-focus .px-detail-136-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(330px, .95fr) !important;
    gap: 18px !important;
  }

  

  

  
}







/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — desktop toolbar/button polish + larger sample rail
   Scope: prompt-detail desktop media side only.
   ======================================================================== */





/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — no-download polish + cleaner left media rail
   ======================================================================== */





/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — desktop prompt hero balance + dark favorite polish
   ======================================================================== */



/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — desktop hero spacing + full title underline
   ======================================================================== */


.promxai-prompt-focus .px-prompt-head h1 {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
}

.promxai-prompt-focus .px-prompt-head h1::after {
  inset-inline-start: 0 !important;
  inset-inline-end: 0 !important;
  width: auto !important;
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — add top breathing room to prompt-detail hero row
   ======================================================================== */
@media (min-width: 761px) {
  .promxai-prompt-focus .px-detail-136-grid {
    padding-top: clamp(12px, 1.4vw, 20px) !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — fixed left gallery / independently scrollable info
   ======================================================================== */
@media (min-width: 981px) {
  .promxai-prompt-focus .px-detail-136-grid {
    box-sizing: border-box !important;
    height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 46px) !important;
    min-height: 560px !important;
    max-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 46px) !important;
    align-items: start !important;
    overflow: hidden !important;
  }

  

  .promxai-prompt-focus .px-detail-136-grid > .px-prompt-column,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-column {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    scrollbar-gutter: stable !important;
    padding-bottom: 34px !important;
  }

  /* Keep the clean look: scrolling works without restoring the blue line. */
  .promxai-prompt-focus .px-detail-136-grid > .px-prompt-column {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .promxai-prompt-focus .px-detail-136-grid > .px-prompt-column::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — unified prompt-detail workspace palette
   ======================================================================== */
.promxai-prompt-focus .px-prompt-detail-140,
.promxai-prompt-focus .px-prompt-detail-140 {
  --px-139-bg: #0d1728;
  --px-139-bg-soft: #121f34;
  --px-139-text: #f5f8ff;
  --px-139-muted: #aab8cf;
  --px-139-line: rgba(139, 161, 207, .16);
  --px-139-glass: rgba(17, 29, 49, .68);
  --px-139-glass-strong: rgba(22, 36, 60, .88);
}

body.promxai-prompt-focus {
  background:
    radial-gradient(circle at 18% 20%, rgba(45, 107, 195, .10), transparent 34rem),
    radial-gradient(circle at 86% 13%, rgba(132, 77, 229, .085), transparent 31rem),
    linear-gradient(180deg, #111c2e 0%, #0d1728 52%, #0c1625 100%) !important;
}

html[data-theme="light"] body.promxai-prompt-focus {
  background:
    radial-gradient(circle at 12% 15%, rgba(65, 126, 232, .065), transparent 31rem),
    radial-gradient(circle at 89% 11%, rgba(145, 91, 225, .052), transparent 29rem),
    linear-gradient(180deg, #fcfdff 0%, #f6f8fc 56%, #f1f5fa 100%) !important;
}

/* Left and right now live on the same calm navy canvas. */
html[data-theme="dark"] .promxai-prompt-focus .px-detail-136-grid,
html[data-theme="dark"] .promxai-prompt-focus .px-detail-139-grid{
  background: transparent !important;
}

html[data-theme="dark"] .promxai-prompt-focus .px-prompt-column {
  color: #f6f8ff !important;
}

html[data-theme="dark"] .promxai-prompt-focus .px-prompt-head,
html[data-theme="dark"] .promxai-prompt-focus .px-prompt-copy-card,
html[data-theme="dark"] .promxai-prompt-focus .px-project-summary,
html[data-theme="dark"] .promxai-prompt-focus .px-prompt-text,
html[data-theme="dark"] .promxai-prompt-focus .px-related-inline,
html[data-theme="dark"] .promxai-prompt-focus .px-prompt-scenes,
html[data-theme="dark"] .promxai-prompt-focus .px-related-drawer {
  border-color: rgba(137, 157, 205, .16) !important;
  background:
    linear-gradient(145deg, rgba(30, 45, 73, .78), rgba(16, 28, 48, .86)) !important;
  box-shadow: 0 18px 46px rgba(2, 8, 20, .22), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html[data-theme="dark"] .promxai-prompt-focus .px-prompt-text,
html[data-theme="dark"] .promxai-prompt-focus .px-project-summary {
  color: #e9eefb !important;
}

html[data-theme="dark"] .promxai-prompt-focus .px-prompt-text p,
html[data-theme="dark"] .promxai-prompt-focus .px-project-summary p {
  color: #d8e0ef !important;
}

/* Premium light mode: clean white with a quiet blue-gray cast. */
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 {
  --px-139-bg: #f7f9fd;
  --px-139-bg-soft: #ffffff;
  --px-139-text: #192238;
  --px-139-muted: #68768e;
  --px-139-line: rgba(76, 96, 135, .12);
  --px-139-glass: rgba(255,255,255,.76);
  --px-139-glass-strong: rgba(255,255,255,.94);
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-head,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-copy-card,
html[data-theme="light"] .promxai-prompt-focus .px-project-summary,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-text,
html[data-theme="light"] .promxai-prompt-focus .px-related-inline,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-scenes,
html[data-theme="light"] .promxai-prompt-focus .px-related-drawer {
  border-color: rgba(72, 93, 133, .11) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,249,253,.90)) !important;
  box-shadow: 0 16px 42px rgba(55, 73, 110, .075), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-column {
  color: #182033 !important;
}






/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — chroma glass polish for prompt detail
   ======================================================================== */
@media (min-width: 761px) {
  

  

  

  

  

  

  .promxai-prompt-focus .px-prompt-column{
    position: relative !important;
    z-index: 1 !important;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  .promxai-prompt-focus .px-prompt-head,
  .promxai-prompt-focus .px-prompt-copy-card,
  .promxai-prompt-focus .px-related-inline {
    border-color: rgba(122, 139, 178, .12) !important;
    background:
      radial-gradient(circle at 96% 6%, rgb(var(--px-media-rgb, 123 63 242) / .08), transparent 28%),
      linear-gradient(180deg, rgba(14, 21, 38, .76), rgba(10, 16, 30, .68)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 42px rgba(4, 8, 20, .16) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-head,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-copy-card,
  html[data-theme="light"] .promxai-prompt-focus .px-related-inline {
    border-color: rgba(120, 136, 173, .15) !important;
    background:
      radial-gradient(circle at 96% 6%, rgb(var(--px-media-rgb, 123 63 242) / .05), transparent 28%),
      linear-gradient(180deg, rgba(255,255,255,.84), rgba(247,250,255,.80)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 18px 42px rgba(86, 101, 138, .10) !important;
  }
}

/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — premium toolbar + stage elevation polish
   ======================================================================== */
@media (min-width: 761px) {
  

  

  

  

  

  

  .promxai-prompt-focus .px-prompt-stage {
    transform: translateY(-12px) !important;
  }

  

  

  

  

  

  

  

  

  

  

  .promxai-prompt-focus .px-prompt-head,
  .promxai-prompt-focus .px-prompt-copy-card,
  .promxai-prompt-focus .px-related-inline {
    border-color: rgba(126, 146, 198, .16) !important;
    background:
      radial-gradient(circle at 96% 6%, rgb(var(--px-media-rgb, 123 63 242) / .11), transparent 28%),
      linear-gradient(180deg, rgba(17, 25, 44, .82), rgba(10, 17, 33, .72)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 18px 42px rgba(4, 8, 20, .18),
      0 0 0 1px rgba(80, 120, 255, .04) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-head,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-copy-card,
  html[data-theme="light"] .promxai-prompt-focus .px-related-inline {
    border-color: rgba(120, 136, 173, .17) !important;
    background:
      radial-gradient(circle at 96% 6%, rgb(var(--px-media-rgb, 123 63 242) / .06), transparent 28%),
      linear-gradient(180deg, rgba(255,255,255,.90), rgba(247,250,255,.84)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      0 18px 42px rgba(86, 101, 138, .11),
      0 0 0 1px rgba(126, 147, 194, .05) !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  

  .promxai-prompt-focus .px-prompt-stage {
    transform: translateY(-8px) !important;
  }
}

/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — final desktop balance + active thumb clarity
   ======================================================================== */




/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — back pill, prompt-aware copy labels, light thumbs
   Scope: prompt detail only. Base geometry and gallery logic remain 1.3.48.
   ======================================================================== */






/* The back arrow follows reading direction: right in Arabic, left in English. */






.promxai-prompt-focus .px-copy-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.promxai-prompt-focus .px-copy-button [data-copy-button-label] {
  min-width: 0 !important;
  line-height: 1.2 !important;
}

/* Light mode: active reference is natural and sharp; inactive images are only softly muted. */











/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — floating back control + prompt/interface sync
   Scope: prompt detail only. Gallery geometry, arrows and sticky columns stay locked.
   ======================================================================== */







/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — separate Back button aligned with the toolbar
   Scope: desktop prompt-detail Back control only.
   The button stays alone to the left of the main image while sharing the
   exact vertical line and 38px control height of the upper media tools.
   ======================================================================== */






/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — Back button inset correction
   Scope: desktop prompt-detail Back control only.
   The Back pill remains separate on the left side of the main image and on
   the exact toolbar Y-axis, but is moved fully inside the workspace so it
   no longer touches or clips against the outer theme edge.
   ======================================================================== */




/* ========================================================================
   Mobile scene-switcher behavior only. Phone toolbar geometry is owned by
   mobile-detail-toolbar.css.
   ======================================================================== */

@media (max-width: 760px) {
  

  .promxai-prompt-focus .px-prompt-scene-switcher {
    direction: ltr !important;
    scroll-behavior: auto !important;
  }

  .promxai-prompt-focus .px-prompt-scene-button {
    direction: rtl;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
  }

  html[data-ui-lang="en"] .promxai-prompt-focus .px-prompt-scene-button { direction: ltr; }
}

/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — single-source desktop Back anchor
   - One unique selector and one coordinate system.
   - Anchored physically to the left edge of the outer media shell.
   - Independent from image ratio, gallery count, stage transforms and JS.
   ======================================================================== */





/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — Prompt Detail Semantic Color Contract
   This is the only final color authority for the prompt workspace.
   Geometry, sticky layout, gallery motion and Back anchoring remain unchanged.
   ======================================================================== */
.promxai-prompt-focus .px-prompt-detail-140,
.promxai-prompt-focus .px-prompt-detail-140 {
  --px-139-bg: var(--px-canvas);
  --px-139-bg-soft: var(--px-canvas-subtle);
  --px-139-text: var(--px-text-primary);
  --px-139-muted: var(--px-text-secondary);
  --px-139-line: var(--px-line);
  --px-139-glass: var(--px-surface-1);
  --px-139-glass-strong: var(--px-surface-2);
}

body.promxai-prompt-focus {
  color: var(--px-text-primary) !important;
  background:
    radial-gradient(circle at 13% 15%, rgb(var(--px-accent-blue-rgb) / .07), transparent 31rem),
    radial-gradient(circle at 88% 10%, rgb(var(--px-accent-purple-rgb) / .10), transparent 30rem),
    radial-gradient(circle at 34% 106%, rgb(var(--px-accent-magenta-rgb) / .035), transparent 35rem),
    linear-gradient(180deg, var(--px-canvas) 0%, color-mix(in srgb, var(--px-canvas) 92%, var(--px-canvas-deep)) 56%, var(--px-canvas-deep) 100%) !important;
}
html[data-theme="light"] body.promxai-prompt-focus {
  background:
    radial-gradient(circle at 12% 15%, rgb(var(--px-accent-blue-rgb) / .040), transparent 31rem),
    radial-gradient(circle at 89% 11%, rgb(var(--px-accent-magenta-rgb) / .032), transparent 29rem),
    radial-gradient(circle at 34% 100%, rgba(177, 139, 103, .10), transparent 34rem),
    linear-gradient(180deg, #f8f4ee 0%, var(--px-canvas) 56%, var(--px-canvas-subtle) 100%) !important;
}
.promxai-prompt-focus .px-main {
  background:
    radial-gradient(circle at 13% 16%, rgb(var(--px-accent-blue-rgb) / .045), transparent 22%),
    radial-gradient(circle at 87% 11%, rgb(var(--px-accent-magenta-rgb) / .032), transparent 19%),
    radial-gradient(circle at 24% 82%, rgb(var(--px-accent-purple-rgb) / .035), transparent 18%) !important;
}

/* Media workspace */






/* Toolbar, arrows, counter and the one desktop Back anchor share one neutral contract. */





/* Main image and references */







/* Right-column cards */
.promxai-prompt-focus :where(
  .px-prompt-head,.px-prompt-copy-card,.px-project-summary,.px-prompt-text,
  .px-related-inline,.px-prompt-scenes,.px-related-drawer
) {
  color: var(--px-text-primary) !important;
  border-color: var(--px-line) !important;
  background: radial-gradient(circle at 96% 6%, rgb(var(--px-media-rgb, 124 58 237) / .050), transparent 30%), linear-gradient(145deg, var(--px-surface-2), var(--px-surface-1)) !important;
  box-shadow: var(--px-shadow-card) !important;
}
.promxai-prompt-focus :where(.px-prompt-column,.px-prompt-head h1,.px-related-inline h2) { color: var(--px-text-primary) !important; }
.promxai-prompt-focus :where(.px-project-summary,.px-project-summary p,.px-prompt-text,.px-prompt-text p,.px-prompt-head p,.px-current-scene-title) { color: var(--px-text-secondary) !important; }
.promxai-prompt-focus :where(.px-prompt-tabs,.px-prompt-scene-switcher) { border-color: var(--px-line-soft) !important; background: color-mix(in srgb, var(--px-canvas) 58%, transparent) !important; }
.promxai-prompt-focus :where(.px-prompt-scene-button,.px-prompt-tabs button) { color: var(--px-text-secondary) !important; border-color: var(--px-line-soft) !important; background: color-mix(in srgb, var(--px-surface-2) 72%, transparent) !important; }
.promxai-prompt-focus .px-prompt-scene-button.is-active,
.promxai-prompt-focus .px-copy-button { color: #fff !important; border-color: transparent !important; background: var(--px-accent-gradient) !important; box-shadow: var(--px-shadow-brand) !important; }
.promxai-prompt-focus .px-prompt-tabs button.is-active { color: var(--px-text-primary) !important; background: var(--px-surface-3) !important; box-shadow: var(--px-shadow-soft) !important; }
.promxai-prompt-focus .px-related-view-all { color: var(--px-text-control) !important; border-color: var(--px-line) !important; background: color-mix(in srgb, var(--px-surface-2) 76%, transparent) !important; box-shadow: var(--px-shadow-soft) !important; }
.promxai-prompt-focus .px-related-mini { border-color: var(--px-line) !important; background: var(--px-canvas-subtle) !important; box-shadow: var(--px-shadow-soft) !important; }

/* Mobile color contract; no touch or geometry declarations here. */



/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — final video-first gallery + single Back authority
   These selectors are intentionally unique. Historical desktop Back classes
   in this active bundle were renamed to inert legacy selectors above.
   ======================================================================== */

/* Media layers occupy one identical cell. The hidden state always wins over
   accumulated historical display declarations, so a video and reference image
   can never appear side by side. */





/* One physical left anchor on every desktop prompt-detail page. It is attached
   only to the outer media shell and is independent of image ratio, video size,
   thumbnail count, language direction and content loading. */







/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — right-column polish
   - active prompt button outlined instead of full purple fill
   - remove nested white square layers inside rounded cards
   - keep header/prompt cards fully rounded top and bottom
   ======================================================================== */
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head,
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-copy-card {
  border-radius: 28px !important;
  overflow: hidden !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head .px-project-summary,
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-copy-card .px-prompt-panel,
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-copy-card .px-prompt-text {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-copy-card .px-prompt-panel,
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-copy-card .px-prompt-text,
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head .px-project-summary {
  border-radius: 22px !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-switcher {
  border-radius: 999px !important;
  padding: 6px !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-switcher.is-shared-all {
  display: flex !important;
  width: max-content;
  max-width: 100%;
  grid-template-columns: none !important;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-button--shared {
  min-width: 132px;
  cursor: default !important;
  pointer-events: none;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-button {
  border-radius: 999px !important;
  border: 1px solid var(--px-line-soft) !important;
  background: color-mix(in srgb, var(--px-surface-2) 66%, transparent) !important;
  color: var(--px-text-secondary) !important;
  box-shadow: none !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-button.is-active,
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-button[aria-current="true"] {
  color: var(--px-text-primary) !important;
  border-color: rgb(var(--px-media-rgb, 123 63 242) / .56) !important;
  background: color-mix(in srgb, rgb(var(--px-media-rgb, 123 63 242) / .10) 34%, var(--px-surface-2)) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .22),
    0 0 0 3px rgb(var(--px-media-rgb, 123 63 242) / .08),
    0 10px 22px rgb(var(--px-media-rgb, 123 63 242) / .10) !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-button.is-active::after,
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-button[aria-current="true"]::after {
  opacity: .95 !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-button {
  background: color-mix(in srgb, var(--px-surface-2) 82%, transparent) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-button.is-active,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-button[aria-current="true"] {
  background: color-mix(in srgb, rgb(var(--px-media-rgb, 123 63 242) / .08) 26%, #fff) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .92),
    0 0 0 3px rgb(var(--px-media-rgb, 123 63 242) / .06),
    0 10px 20px rgb(84 98 130 / .08) !important;
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — header rhythm + glass cards cleanup
   ======================================================================== */
@media (min-width: 761px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-copy-card {
    border-radius: 30px !important;
    overflow: hidden !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-copy-card {
    border-color: rgba(117, 133, 171, .14) !important;
    background:
      radial-gradient(circle at 96% 7%, rgb(var(--px-media-rgb, 123 63 242) / .045), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,.76), rgba(250,252,255,.58)) !important;
    box-shadow: 0 14px 34px rgba(83, 98, 132, .07), inset 0 1px 0 rgba(255,255,255,.74) !important;
    -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
    backdrop-filter: blur(22px) saturate(135%) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head {
    text-align: center !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head h1 {
    display: block !important;
    width: 100% !important;
    max-inline-size: 13.8ch !important;
    margin: 0 auto 14px !important;
    font-size: clamp(30px, 2.55vw, 50px) !important;
    line-height: 1.16 !important;
    letter-spacing: -.022em !important;
    text-align: center !important;
    text-wrap: balance !important;
    overflow-wrap: anywhere !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-project-summary {
    max-inline-size: min(100%, 33rem) !important;
    margin: 0 auto 20px !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1.78 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-primary-actions {
    justify-content: center !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-copy-card {
    padding-top: 14px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-tabs,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-switcher {
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-panel,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-text,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-text p {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-panel {
    border-radius: 26px !important;
    padding-inline: clamp(18px, 2vw, 26px) !important;
    padding-block: 16px 18px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-text {
    padding: 0 !important;
    border-radius: 24px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-button {
    min-height: 46px !important;
    padding-inline: 18px !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — visual rail clarity in light mode
   ======================================================================== */
html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb,
html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,249,255,.86)) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb:not(.is-active):not([aria-current="true"]) img,
html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb:not(.is-active):not([aria-current="true"]) img {
  filter: blur(.6px) saturate(.92) brightness(.995) contrast(.99) !important;
  opacity: .93 !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb.is-active,
html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb.is-active,
html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb[aria-current="true"],
html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb[aria-current="true"] {
  opacity: 1 !important;
  border-color: rgb(var(--px-media-rgb) / .52) !important;
  background: linear-gradient(180deg, #fff, #f7f9ff) !important;
  box-shadow:
    0 0 0 3px rgb(var(--px-media-rgb) / .12),
    0 0 22px rgb(var(--px-media-rgb) / .10),
    0 14px 26px rgba(96, 110, 144, .15) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb.is-active img,
html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb.is-active img,
html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb[aria-current="true"] img,
html[data-theme="light"] .promxai-prompt-focus .px-detail-139-thumb.px-visual-thumb[aria-current="true"] img {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — right data column top/bottom balance
   ======================================================================== */
@media (min-width: 981px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage {
    transform: translateY(0) !important;
    padding-top: 12px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head {
    margin-top: 0 !important;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage {
    transform: translateY(0) !important;
    padding-top: 8px !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — remove the legacy square behind right-side cards
   ======================================================================== */
.promxai-prompt-focus .px-prompt-detail-140 > .px-detail-136-grid > .px-prompt-column,
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-column {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head,
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-copy-card,
.promxai-prompt-focus .px-prompt-detail-140 .px-related-inline {
  position: relative !important;
  border-radius: 30px !important;
  overflow: hidden !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head .px-project-summary,
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head .px-primary-actions,
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-copy-card .px-prompt-panel,
.promxai-prompt-focus .px-prompt-detail-140 .px-prompt-copy-card .px-prompt-text {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — unified right-side information shell
   The left gallery remains untouched. The right title, prompt data and
   related designs now live inside one vertically scrollable glass frame.
   ======================================================================== */
@media (min-width: 981px) {
  .promxai-prompt-focus .px-prompt-detail-140 > .px-detail-136-grid > .px-prompt-column,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-column {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scrollbar-gutter: auto !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage {
    --px-right-shell-gap: clamp(12px, .9vw, 16px);
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--px-right-shell-gap) !important;
    margin: 0 !important;
    padding: 16px 12px 18px 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    scroll-behavior: smooth !important;
    scroll-padding-block: 16px !important;
    transform: none !important;
    border: 1px solid rgb(var(--px-media-rgb, 123 63 242) / .24) !important;
    border-radius: 34px !important;
    background:
      radial-gradient(circle at 92% 4%, rgb(var(--px-media-rgb, 123 63 242) / .15), transparent 30%),
      radial-gradient(circle at 8% 96%, rgb(47 140 255 / .08), transparent 34%),
      linear-gradient(155deg, rgba(18, 28, 49, .86), rgba(9, 16, 31, .76)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.075),
      0 20px 52px rgba(2,7,18,.22),
      0 0 0 1px rgb(var(--px-media-rgb, 123 63 242) / .035),
      0 0 30px rgb(var(--px-media-rgb, 123 63 242) / .08) !important;
    -webkit-backdrop-filter: blur(26px) saturate(145%) !important;
    backdrop-filter: blur(26px) saturate(145%) !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgb(var(--px-media-rgb, 123 63 242) / .58) transparent !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage::-webkit-scrollbar {
    width: 7px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage::-webkit-scrollbar-track {
    margin-block: 18px !important;
    background: transparent !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, #2f8cff, #7b3ff2 58%, #ff2ed1) padding-box !important;
    box-shadow: 0 0 12px rgb(var(--px-media-rgb, 123 63 242) / .24) !important;
  }

  /* Sections are coordinated inner zones, not three unrelated outer cards. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-head,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-copy-card,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-related-inline {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    border: 1px solid rgba(135, 153, 194, .11) !important;
    border-radius: 25px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-head {
    padding: clamp(22px, 2vw, 30px) clamp(18px, 1.8vw, 26px) 22px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-copy-card {
    padding: 14px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-related-grid-section {
    margin-top: 0 !important;
    padding: 16px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-copy-card[hidden] {
    display: none !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage {
    border-color: rgb(var(--px-media-rgb, 123 63 242) / .16) !important;
    background:
      radial-gradient(circle at 92% 4%, rgb(var(--px-media-rgb, 123 63 242) / .075), transparent 30%),
      radial-gradient(circle at 8% 96%, rgb(47 140 255 / .045), transparent 34%),
      linear-gradient(155deg, rgba(255,255,255,.88), rgba(246,249,254,.72)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 18px 44px rgba(74, 90, 126, .10),
      0 0 0 1px rgb(var(--px-media-rgb, 123 63 242) / .025),
      0 0 24px rgb(var(--px-media-rgb, 123 63 242) / .055) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-head,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-copy-card,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-related-inline {
    border-color: rgba(102, 121, 161, .10) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.20)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
  }
}

/* Medium screens keep the unified visual language but use normal page scroll. */
@media (min-width: 761px) and (max-width: 980px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 14px !important;
    transform: none !important;
    border: 1px solid rgb(var(--px-media-rgb, 123 63 242) / .18) !important;
    border-radius: 30px !important;
    background:
      radial-gradient(circle at 94% 4%, rgb(var(--px-media-rgb, 123 63 242) / .10), transparent 30%),
      linear-gradient(155deg, rgba(18,28,49,.80), rgba(9,16,31,.70)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(2,7,18,.16) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-head,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-copy-card,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-related-inline {
    margin: 0 !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-related-grid-section {
    margin-top: 0 !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage {
    background:
      radial-gradient(circle at 94% 4%, rgb(var(--px-media-rgb, 123 63 242) / .06), transparent 30%),
      linear-gradient(155deg, rgba(255,255,255,.90), rgba(246,249,254,.76)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 16px 34px rgba(74,90,126,.09) !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — refined unified right shell
   - custom scroll indicator follows real scroll only
   - stronger light-mode contrast
   - calmer inner sections with fewer nested frames
   - left gallery remains untouched
   ======================================================================== */
@media (min-width: 981px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage {
    --px-right-shell-gap: 14px;
    position: relative !important;
    gap: var(--px-right-shell-gap) !important;
    padding: 16px 18px 18px 20px !important;
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* One subtle shell; inner areas are sections, not cards inside cards. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-head,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-copy-card,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-related-inline {
    position: relative !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.010)) !important;
    box-shadow: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-head::after,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-copy-card::after {
    content: "" !important;
    position: absolute !important;
    inset-inline: 18px !important;
    bottom: -8px !important;
    height: 1px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgb(var(--px-media-rgb, 123 63 242) / .24), transparent) !important;
    pointer-events: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-head {
    padding: clamp(22px, 2vw, 30px) clamp(18px, 1.8vw, 26px) 23px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-copy-card {
    padding: 14px 12px 16px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-related-grid-section {
    padding: 14px !important;
  }

  /* A calm rail with a fixed-size thumb. It never animates by itself. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-column {
    position: relative !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator {
    --px-right-thumb-y: 0px;
    --px-right-thumb-h: 52px;
    position: absolute !important;
    z-index: 30 !important;
    top: 18px !important;
    bottom: 18px !important;
    left: 7px !important;
    width: 4px !important;
    min-height: 140px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.055) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .18s ease !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator.is-scrollable {
    opacity: 1 !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator__thumb {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 3px !important;
    height: var(--px-right-thumb-h) !important;
    min-height: 46px !important;
    max-height: 58px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #2f8cff 0%, #7244e8 58%, #d83fd6 100%) !important;
    box-shadow: 0 0 10px rgb(var(--px-media-rgb, 123 63 242) / .20) !important;
    transform: translate3d(-50%, var(--px-right-thumb-y), 0) !important;
    will-change: transform !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage {
    border-color: rgba(54, 91, 177, .30) !important;
    background:
      radial-gradient(circle at 92% 4%, rgba(68, 84, 214, .105), transparent 32%),
      radial-gradient(circle at 8% 96%, rgba(32, 111, 213, .065), transparent 35%),
      linear-gradient(155deg, rgba(255,255,255,.94), rgba(243,247,253,.84)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      0 18px 46px rgba(66, 82, 121, .13),
      0 0 0 1px rgba(72, 72, 191, .055),
      0 0 26px rgba(83, 67, 196, .075) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-head,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-copy-card,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-related-inline {
    border: 0 !important;
    background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(244,248,255,.18)) !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-head::after,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-copy-card::after {
    background: linear-gradient(90deg, transparent, rgba(50, 86, 186, .26), rgba(112, 55, 202, .30), transparent) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator {
    background: rgba(42, 67, 122, .16) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator__thumb {
    background: linear-gradient(180deg, #1f64bd 0%, #5631b7 100%) !important;
    box-shadow: 0 0 8px rgba(44, 73, 151, .19) !important;
  }
}

/* Medium screens retain one shell and stronger light-mode contrast, using page scroll. */
@media (min-width: 761px) and (max-width: 980px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator {
    display: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-head,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-copy-card,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-related-inline {
    border: 0 !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage {
    border-color: rgba(54, 91, 177, .25) !important;
    background:
      radial-gradient(circle at 94% 4%, rgba(68,84,214,.085), transparent 32%),
      linear-gradient(155deg, rgba(255,255,255,.95), rgba(243,247,253,.86)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 16px 36px rgba(66,82,121,.11) !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — Model 2 professional floating right panel
   - isolated gradient shell around the full information column
   - clear hierarchy: project header, prompt controls/text, related designs
   - balanced dark/light surfaces
   - left gallery is intentionally untouched
   ======================================================================== */

@media (min-width: 981px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127 {
    --px-v127-radius: 34px;
    --px-v127-section-radius: 22px;
    position: relative !important;
    isolation: isolate !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 1px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: var(--px-v127-radius) !important;
    background:
      linear-gradient(145deg,
        rgba(47, 140, 255, .82) 0%,
        rgba(123, 63, 242, .72) 56%,
        rgba(255, 46, 209, .60) 100%) !important;
    box-shadow:
      0 28px 72px rgba(2, 7, 20, .34),
      0 0 0 1px rgba(255,255,255,.025),
      0 0 40px rgb(var(--px-media-rgb, 123 63 242) / .12) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    inset: 12% -12px 12% -12px !important;
    border-radius: 44px !important;
    background:
      radial-gradient(circle at 12% 22%, rgba(47,140,255,.24), transparent 38%),
      radial-gradient(circle at 88% 78%, rgba(211,54,220,.20), transparent 40%) !important;
    filter: blur(22px) !important;
    opacity: .78 !important;
    pointer-events: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127::after {
    content: "" !important;
    position: absolute !important;
    z-index: 3 !important;
    inset: 1px !important;
    border-radius: calc(var(--px-v127-radius) - 1px) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.11) !important;
    pointer-events: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll {
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 16px 14px 18px 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: calc(var(--px-v127-radius) - 1px) !important;
    background:
      radial-gradient(circle at 88% 2%, rgb(var(--px-media-rgb, 123 63 242) / .13), transparent 30%),
      radial-gradient(circle at 8% 98%, rgba(31,100,220,.08), transparent 36%),
      linear-gradient(158deg, rgba(13,22,40,.97), rgba(7,13,27,.94)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      inset 0 0 0 1px rgba(255,255,255,.025) !important;
    -webkit-backdrop-filter: blur(26px) saturate(145%) !important;
    backdrop-filter: blur(26px) saturate(145%) !important;
    scrollbar-width: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }

  /* Three coordinated sections inside one floating panel. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-prompt-head,
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-prompt-copy-card,
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-related-inline {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(139,157,198,.14) !important;
    border-radius: var(--px-v127-section-radius) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.018)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      0 12px 30px rgba(1,6,18,.09) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-prompt-head::before,
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-prompt-copy-card::before,
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-related-inline::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 2px !important;
    background: linear-gradient(180deg, #2f8cff, #7b3ff2 58%, #ff2ed1) !important;
    opacity: .58 !important;
    pointer-events: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-prompt-head::after,
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-prompt-copy-card::after {
    display: none !important;
    content: none !important;
  }

  /* Project header — strongest hierarchy, centered and calm. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-prompt-head {
    padding: clamp(24px, 2vw, 31px) clamp(20px, 1.8vw, 27px) 22px !important;
    text-align: center !important;
    background:
      radial-gradient(circle at 92% 0%, rgb(var(--px-media-rgb, 123 63 242) / .12), transparent 36%),
      linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.020)) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head h1 {
    max-inline-size: 14ch !important;
    margin: 0 auto 14px !important;
    font-size: clamp(30px, 2.35vw, 46px) !important;
    line-height: 1.13 !important;
    letter-spacing: -.022em !important;
    text-align: center !important;
    text-wrap: balance !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-project-summary {
    max-inline-size: 35rem !important;
    margin: 0 auto 20px !important;
    color: color-mix(in srgb, var(--px-text-primary) 72%, transparent) !important;
    font-size: 14px !important;
    line-height: 1.72 !important;
    text-align: center !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-primary-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
    justify-content: center !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-primary-button,
  .promxai-prompt-focus .px-prompt-detail-140 .px-explain-button {
    min-width: 0 !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    justify-content: center !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-explain-button {
    border-color: rgba(137,154,194,.22) !important;
    background: rgba(4,10,24,.24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  /* Prompt area — selector, languages and readable text card. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-prompt-copy-card {
    padding: 14px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-switcher {
    min-height: 50px !important;
    margin-bottom: 10px !important;
    padding: 5px !important;
    border: 1px solid rgba(135,153,194,.15) !important;
    border-radius: 999px !important;
    background: rgba(4,10,24,.28) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-button {
    min-height: 40px !important;
    border-radius: 999px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-tabs {
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-tabs > button {
    min-height: 42px !important;
    border: 1px solid rgba(135,153,194,.13) !important;
    border-radius: 12px !important;
    background: rgba(4,10,24,.22) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-tabs > button.is-active {
    border-color: rgb(var(--px-media-rgb, 123 63 242) / .42) !important;
    background: linear-gradient(135deg, rgba(47,140,255,.15), rgba(123,63,242,.14)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 18px rgb(var(--px-media-rgb, 123 63 242) / .08) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-panel {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-text {
    max-height: none !important;
    padding: 16px 17px !important;
    overflow: visible !important;
    border: 1px solid rgba(135,153,194,.12) !important;
    border-radius: 16px !important;
    background: rgba(4,10,24,.24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-text p {
    margin: 0 !important;
    color: color-mix(in srgb, var(--px-text-primary) 84%, transparent) !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-copy-button {
    width: 100% !important;
    min-height: 46px !important;
    margin-top: 10px !important;
    border: 0 !important;
    border-radius: 13px !important;
    justify-content: center !important;
    background: linear-gradient(105deg, #1687ff, #6f4cf0 56%, #c83ad8) !important;
    box-shadow: 0 12px 26px rgb(var(--px-media-rgb, 123 63 242) / .18), inset 0 1px 0 rgba(255,255,255,.18) !important;
  }

  /* Related area — compact and integrated, like Model 2. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-related-grid-section {
    padding: 15px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-related-inline__head {
    margin-bottom: 12px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-related-inline__head h2 {
    font-size: clamp(18px, 1.3vw, 22px) !important;
    line-height: 1.25 !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-related-view-all {
    min-height: 36px !important;
    padding-inline: 12px !important;
    border: 1px solid rgba(135,153,194,.16) !important;
    border-radius: 11px !important;
    background: rgba(4,10,24,.22) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-related-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-related-mini {
    aspect-ratio: 9 / 16 !important;
    border: 1px solid rgba(135,153,194,.14) !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    background: rgba(4,10,24,.18) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.12) !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-related-mini:hover,
  .promxai-prompt-focus .px-prompt-detail-140 .px-related-mini:focus-visible {
    transform: translateY(-2px) !important;
    border-color: rgb(var(--px-media-rgb, 123 63 242) / .44) !important;
    box-shadow: 0 0 0 1px rgb(var(--px-media-rgb, 123 63 242) / .08), 0 14px 28px rgba(0,0,0,.18) !important;
    outline: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-related-mini img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Refined scroll accent on the separating edge. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator {
    z-index: 8 !important;
    top: 24px !important;
    bottom: 24px !important;
    left: -5px !important;
    width: 5px !important;
    background: rgba(47,140,255,.10) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator__thumb {
    width: 4px !important;
    background: linear-gradient(180deg, #2f8cff, #7b3ff2 58%, #ff2ed1) !important;
    box-shadow: 0 0 10px rgb(var(--px-media-rgb, 123 63 242) / .18) !important;
  }

  /* Light mode mirrors the same hierarchy with crisp, professional contrast. */
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127 {
    background:
      linear-gradient(145deg,
        rgba(39,121,222,.55) 0%,
        rgba(103,72,205,.43) 58%,
        rgba(181,71,191,.34) 100%) !important;
    box-shadow:
      0 24px 58px rgba(72,88,126,.16),
      0 0 0 1px rgba(66,86,133,.035),
      0 0 30px rgba(88,72,190,.07) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127::before {
    opacity: .42 !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll {
    background:
      radial-gradient(circle at 88% 2%, rgba(74,86,204,.075), transparent 31%),
      radial-gradient(circle at 8% 98%, rgba(35,109,209,.045), transparent 36%),
      linear-gradient(158deg, rgba(252,253,255,.98), rgba(243,247,253,.96)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 0 0 1px rgba(66,86,133,.03) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-prompt-head,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-prompt-copy-card,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-related-inline {
    border-color: rgba(84,105,148,.13) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(248,250,255,.62)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 12px 26px rgba(82,96,129,.055) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-project-summary {
    color: #69748d !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-explain-button,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-switcher,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-tabs > button,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-text,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-related-view-all {
    border-color: rgba(84,105,148,.12) !important;
    background: rgba(247,249,254,.82) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.94) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-tabs > button.is-active {
    border-color: rgba(87,73,201,.28) !important;
    background: linear-gradient(135deg, rgba(43,132,236,.08), rgba(116,69,208,.08)) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-text p {
    color: #4f5b73 !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-related-mini {
    border-color: rgba(84,105,148,.12) !important;
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(82,96,129,.08) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator {
    background: rgba(38,74,149,.12) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator__thumb {
    background: linear-gradient(180deg, #1e6fcc, #6537bd 100%) !important;
    box-shadow: 0 0 7px rgba(47,74,151,.17) !important;
  }
}

/* Medium desktop/tablet: same visual panel, natural page scrolling. */
@media (min-width: 761px) and (max-width: 980px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127 {
    position: relative !important;
    padding: 1px !important;
    border-radius: 30px !important;
    background: linear-gradient(145deg, rgba(47,140,255,.58), rgba(123,63,242,.50), rgba(255,46,209,.40)) !important;
    box-shadow: 0 18px 42px rgba(2,7,18,.18) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 14px !important;
    border-radius: 29px !important;
    background: linear-gradient(158deg, rgba(13,22,40,.96), rgba(7,13,27,.92)) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-prompt-head,
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-prompt-copy-card,
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-related-inline {
    margin: 0 !important;
    border: 1px solid rgba(139,157,198,.13) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.025) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator {
    display: none !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll {
    background: linear-gradient(158deg, rgba(252,253,255,.98), rgba(243,247,253,.95)) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-prompt-head,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-prompt-copy-card,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel-v127__scroll > .px-related-inline {
    border-color: rgba(84,105,148,.12) !important;
    background: rgba(255,255,255,.78) !important;
  }
}

/* ========================================================================
   PromXAI Theme 1.4.0 consolidated — clean floating information panel
   The former blue backing plate is removed. One real panel surface now owns
   the border, shadow and scroll area; all separation comes from soft shadow.
   ======================================================================== */

@media (min-width: 981px) {
  .promxai-prompt-focus .px-prompt-detail-140 > .px-detail-136-grid > .px-prompt-column,
  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-column {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    scrollbar-gutter: auto !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel {
    --px-v128-radius: 34px;
    --px-v128-section-radius: 23px;
    position: relative !important;
    isolation: isolate !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: var(--px-v128-radius) !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* A blurred halo only: no solid or semi-solid rectangle behind the panel. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel::before {
    content: "" !important;
    position: absolute !important;
    z-index: -2 !important;
    inset: 34px 24px 30px 24px !important;
    border-radius: 48px !important;
    background:
      radial-gradient(circle at 18% 22%, rgba(47,140,255,.28), transparent 52%),
      radial-gradient(circle at 84% 76%, rgba(168,63,226,.22), transparent 54%) !important;
    filter: blur(38px) !important;
    opacity: .54 !important;
    pointer-events: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel::after {
    content: none !important;
    display: none !important;
  }

  /* One physical panel surface with a one-pixel gradient border. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll {
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 17px 15px 19px 17px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    border: 1px solid transparent !important;
    border-radius: var(--px-v128-radius) !important;
    background:
      linear-gradient(158deg, rgba(16,27,46,.985), rgba(7,13,25,.975)) padding-box,
      linear-gradient(145deg, rgba(47,140,255,.46), rgba(123,63,242,.38) 58%, rgba(255,46,209,.23)) border-box !important;
    box-shadow:
      0 30px 72px rgba(1,5,16,.38),
      0 12px 28px rgba(2,8,24,.22),
      0 0 34px rgb(var(--px-media-rgb, 123 63 242) / .10),
      inset 0 1px 0 rgba(255,255,255,.065) !important;
    -webkit-backdrop-filter: blur(24px) saturate(138%) !important;
    backdrop-filter: blur(24px) saturate(138%) !important;
    scrollbar-width: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Internal blocks are sections, not cards inside cards. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-prompt-head,
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-prompt-copy-card,
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-related-inline {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: var(--px-v128-section-radius) !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Keep the approved accent lines without painting a backing rectangle. */
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-prompt-head::before,
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-prompt-copy-card::before,
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-related-inline::before {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    inset: 14px auto 14px 0 !important;
    width: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #2f8cff, #7b3ff2 58%, #ff2ed1) !important;
    opacity: .68 !important;
    box-shadow: 0 0 10px rgb(var(--px-media-rgb, 123 63 242) / .13) !important;
    pointer-events: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-prompt-head::after,
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-prompt-copy-card::after {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    left: 22px !important;
    right: 22px !important;
    bottom: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(77,144,255,.26), rgba(132,77,229,.25), transparent) !important;
    opacity: .72 !important;
    pointer-events: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-prompt-head {
    padding: clamp(25px, 2vw, 32px) clamp(21px, 1.8vw, 28px) 23px !important;
    text-align: center !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-head h1 {
    max-inline-size: 14ch !important;
    margin: 0 auto 14px !important;
    font-size: clamp(30px, 2.35vw, 46px) !important;
    line-height: 1.13 !important;
    letter-spacing: -.022em !important;
    text-align: center !important;
    text-wrap: balance !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-project-summary {
    max-inline-size: 35rem !important;
    margin: 0 auto 20px !important;
    padding: 0 !important;
    color: color-mix(in srgb, var(--px-text-primary) 74%, transparent) !important;
    font-size: 14px !important;
    line-height: 1.72 !important;
    text-align: center !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-primary-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
    justify-content: center !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-primary-button,
  .promxai-prompt-focus .px-prompt-detail-140 .px-explain-button {
    min-width: 0 !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    justify-content: center !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-explain-button {
    border-color: rgba(137,154,194,.22) !important;
    background: rgba(255,255,255,.025) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-prompt-copy-card {
    padding: 14px 14px 17px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-switcher {
    min-height: 50px !important;
    margin-bottom: 10px !important;
    padding: 5px !important;
    border: 1px solid rgba(135,153,194,.16) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.025) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-button {
    min-height: 40px !important;
    border-radius: 999px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-tabs {
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-tabs > button {
    min-height: 42px !important;
    border: 1px solid rgba(135,153,194,.14) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.022) !important;
    box-shadow: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-tabs > button.is-active {
    border-color: rgb(var(--px-media-rgb, 123 63 242) / .42) !important;
    background: linear-gradient(135deg, rgba(47,140,255,.13), rgba(123,63,242,.12)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 16px rgb(var(--px-media-rgb, 123 63 242) / .07) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-panel {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-text {
    max-height: none !important;
    padding: 16px 17px !important;
    overflow: visible !important;
    border: 1px solid rgba(135,153,194,.11) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.018) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-text p {
    margin: 0 !important;
    color: color-mix(in srgb, var(--px-text-primary) 86%, transparent) !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-copy-button {
    width: 100% !important;
    min-height: 46px !important;
    margin-top: 10px !important;
    border: 0 !important;
    border-radius: 13px !important;
    justify-content: center !important;
    background: linear-gradient(105deg, #1687ff, #6f4cf0 56%, #c83ad8) !important;
    box-shadow: 0 12px 26px rgb(var(--px-media-rgb, 123 63 242) / .17), inset 0 1px 0 rgba(255,255,255,.18) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-related-grid-section {
    padding: 16px 15px 17px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-related-inline__head {
    margin-bottom: 12px !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-related-inline__head h2 {
    font-size: clamp(18px, 1.3vw, 22px) !important;
    line-height: 1.25 !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-related-view-all {
    min-height: 36px !important;
    padding-inline: 12px !important;
    border: 1px solid rgba(135,153,194,.15) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.020) !important;
    box-shadow: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-related-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-related-mini {
    aspect-ratio: 9 / 16 !important;
    border: 1px solid rgba(135,153,194,.13) !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.015) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-related-mini:hover,
  .promxai-prompt-focus .px-prompt-detail-140 .px-related-mini:focus-visible {
    transform: translateY(-2px) !important;
    border-color: rgb(var(--px-media-rgb, 123 63 242) / .44) !important;
    box-shadow: 0 0 0 1px rgb(var(--px-media-rgb, 123 63 242) / .07), 0 14px 28px rgba(0,0,0,.16) !important;
    outline: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-related-mini img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator {
    z-index: 8 !important;
    top: 28px !important;
    bottom: 28px !important;
    left: -7px !important;
    width: 4px !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator__thumb {
    width: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #2f8cff, #7b3ff2 60%, #ff2ed1) !important;
    box-shadow: 0 0 8px rgb(var(--px-media-rgb, 123 63 242) / .16) !important;
  }

  /* Light mode uses the same single-surface construction. */
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel::before {
    inset: 32px 22px 28px 22px !important;
    background:
      radial-gradient(circle at 20% 24%, rgba(46,111,205,.20), transparent 54%),
      radial-gradient(circle at 82% 74%, rgba(126,70,199,.15), transparent 56%) !important;
    filter: blur(42px) !important;
    opacity: .42 !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll {
    background:
      linear-gradient(158deg, rgba(255,255,255,.992), rgba(245,248,253,.982)) padding-box,
      linear-gradient(145deg, rgba(40,111,213,.32), rgba(105,69,202,.25) 58%, rgba(188,67,190,.15)) border-box !important;
    box-shadow:
      0 30px 68px rgba(51,69,106,.18),
      0 12px 30px rgba(68,84,122,.10),
      0 0 30px rgba(83,74,183,.065),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
    -webkit-backdrop-filter: blur(22px) saturate(126%) !important;
    backdrop-filter: blur(22px) saturate(126%) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-prompt-head,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-prompt-copy-card,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-related-inline {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-project-summary {
    color: #647089 !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-explain-button,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-scene-switcher,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-tabs > button,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-text,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-related-view-all {
    border-color: rgba(76,98,144,.13) !important;
    background: rgba(255,255,255,.44) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-tabs > button.is-active {
    border-color: rgba(87,73,201,.27) !important;
    background: linear-gradient(135deg, rgba(43,132,236,.08), rgba(116,69,208,.08)) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-text p {
    color: #4d5870 !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-related-mini {
    border-color: rgba(76,98,144,.12) !important;
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(76,92,126,.08) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator__thumb {
    background: linear-gradient(180deg, #1d67bd, #5b34b8 100%) !important;
    box-shadow: 0 0 6px rgba(47,74,151,.14) !important;
  }
}

/* Medium desktop/tablet: same clean surface, natural page scrolling. */
@media (min-width: 761px) and (max-width: 980px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel {
    position: relative !important;
    isolation: isolate !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 30px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    inset: 28px 20px !important;
    border-radius: 40px !important;
    background: radial-gradient(circle, rgb(var(--px-media-rgb, 123 63 242) / .20), transparent 68%) !important;
    filter: blur(34px) !important;
    opacity: .46 !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 15px !important;
    overflow: visible !important;
    border: 1px solid transparent !important;
    border-radius: 30px !important;
    background:
      linear-gradient(158deg, rgba(16,27,46,.985), rgba(7,13,25,.975)) padding-box,
      linear-gradient(145deg, rgba(47,140,255,.42), rgba(123,63,242,.34), rgba(255,46,209,.20)) border-box !important;
    box-shadow: 0 24px 56px rgba(2,7,18,.26), inset 0 1px 0 rgba(255,255,255,.055) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-prompt-head,
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-prompt-copy-card,
  .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-related-inline {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator {
    display: none !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll {
    background:
      linear-gradient(158deg, rgba(255,255,255,.992), rgba(245,248,253,.982)) padding-box,
      linear-gradient(145deg, rgba(40,111,213,.28), rgba(105,69,202,.22), rgba(188,67,190,.13)) border-box !important;
    box-shadow: 0 24px 54px rgba(51,69,106,.15), inset 0 1px 0 rgba(255,255,255,.98) !important;
  }
}





/* 2.0.21-test14 — Create gets its own hierarchy in Prompt Detail.
 * Request Design + Explain remain the compact action pair; the context-aware
 * Create entry is a full-width feature strip below them so it reads as a new
 * PromXAI capability rather than a third cramped button. */
.promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button--spotlight {
  position: relative;
  width: 100%;
  min-height: 64px;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 17px;
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto 18px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 10% 20%,rgb(30 196 255 / .22),transparent 32%),
    linear-gradient(135deg,#125fc9 0%,#6045e8 56%,#c33bcf 100%);
  box-shadow: 0 14px 32px rgb(61 68 207 / .19), inset 0 1px 0 rgb(255 255 255 / .17);
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button--spotlight::after {
  content:"";
  position:absolute;
  width:120px;height:120px;
  inset:-68px -28px auto auto;
  border-radius:50%;
  background:radial-gradient(circle,rgb(255 255 255 / .15),transparent 68%);
  pointer-events:none;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button__icon {
  position:relative;z-index:1;
  width:40px;height:40px;
  border:1px solid rgb(255 255 255 / .18);
  border-radius:13px;
  display:grid;place-items:center;
  background:linear-gradient(160deg,rgb(255 255 255 / .22),rgb(255 255 255 / .07));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .16);
}
.promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button__icon .px-icon { width:20px;height:20px; }
.promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button__copy {
  position:relative;z-index:1;
  min-width:0;
  display:grid;
  gap:4px;
  text-align:start;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button__copy strong {
  overflow:hidden;
  color:#fff;
  font-size:11px;
  font-weight:950;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button__copy em {
  overflow:hidden;
  color:rgb(255 255 255 / .72);
  font-size:7.2px;
  font-style:normal;
  font-weight:780;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button--spotlight small {
  position:relative;z-index:1;
  padding:5px 8px;
  border:1px solid rgb(255 255 255 / .13);
  border-radius:999px;
  color:#fff;
  background:rgb(255 255 255 / .13);
  font-size:6.8px;
  font-weight:950;
  line-height:1;
  white-space:nowrap;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button__arrow {
  position:relative;z-index:1;
  display:grid;place-items:center;
  opacity:.72;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button__arrow .px-icon { width:15px;height:15px; }
.promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button--spotlight:hover,
.promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button--spotlight:focus-visible {
  filter:brightness(1.045);
  transform:translateY(-1px);
  box-shadow:0 17px 36px rgb(61 68 207 / .24),inset 0 1px 0 rgb(255 255 255 / .19);
}
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button--spotlight { color:#fff; }
@media (max-width:760px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-primary-actions { grid-template-columns:1fr 1fr !important; }
  .promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button--spotlight {
    min-height:58px;
    grid-template-columns:36px minmax(0,1fr) auto;
    gap:8px;
    padding:8px 10px;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button__icon { width:36px;height:36px;border-radius:12px; }
  .promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button__copy strong { font-size:10px; }
  .promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button__copy em { font-size:6.5px; }
  .promxai-prompt-focus .px-prompt-detail-140 .px-create-prompt-button__arrow { display:none; }
}


/* test412 — compact Prompt → Skill relation only; no Quick/Professional split. */

/* ========================================================================
   PromXAI Theme 2.0.21-test488 — Prompt progressive disclosure
   Long Prompt Detail copy is compact by default so Related Prompts stay
   reachable. This is visual disclosure only: no nested scroll owner is added,
   and JavaScript-disabled pages keep the complete prompt visible.
   ======================================================================== */
.px-prompt-detail-v2 .px-prompt-disclosure[hidden] {
  display: none !important;
}

.px-prompt-detail-v2 .px-prompt-disclosure {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--px-purple) 32%, var(--px-border));
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--px-text);
  background: color-mix(in srgb, var(--px-surface-soft) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
  cursor: pointer;
}

.px-prompt-detail-v2 .px-prompt-disclosure__expanded { display: none; }
.px-prompt-detail-v2 .px-prompt-panel.is-expanded .px-prompt-disclosure__collapsed { display: none; }
.px-prompt-detail-v2 .px-prompt-panel.is-expanded .px-prompt-disclosure__expanded { display: inline; }

.px-prompt-detail-v2 .px-prompt-disclosure > i {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}

.px-prompt-detail-v2 .px-prompt-panel.is-expanded .px-prompt-disclosure > i {
  transform: translateY(2px) rotate(225deg);
}

@media (min-width: 761px) {
  body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-panel.is-collapsible:not(.is-expanded) .px-prompt-text {
    max-height: var(--px-prompt-collapse-height, clamp(320px, 48svh, 460px)) !important;
    overflow: hidden !important;
  }

  body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-panel.is-expanded .px-prompt-text {
    max-height: none !important;
    overflow: visible !important;
  }
}


/* ========================================================================
   PromXAI Theme 2.0.21-test489 — Desktop/Laptop disclosure label ownership
   The test488 disclosure shell/collapse state was active on desktop, but the
   visible label/icon still depended on generic language-span paint. Own the
   desktop control label explicitly without changing Phone behavior.
   ======================================================================== */
@media (min-width: 761px) {
  body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-disclosure {
    color: var(--px-text-primary, var(--px-text, #f7f9fd)) !important;
  }

  body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-panel:not(.is-expanded) .px-prompt-disclosure__collapsed {
    display: inline-flex !important;
    align-items: center !important;
  }

  body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-panel:not(.is-expanded) .px-prompt-disclosure__expanded {
    display: none !important;
  }

  body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-panel.is-expanded .px-prompt-disclosure__collapsed {
    display: none !important;
  }

  body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-panel.is-expanded .px-prompt-disclosure__expanded {
    display: inline-flex !important;
    align-items: center !important;
  }

  html:not([data-ui-lang="en"]) body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-disclosure :is(.px-prompt-disclosure__collapsed,.px-prompt-disclosure__expanded) > .px-lang-ar,
  html[data-ui-lang="ar"] body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-disclosure :is(.px-prompt-disclosure__collapsed,.px-prompt-disclosure__expanded) > .px-lang-ar {
    display: inline !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
  }

  html:not([data-ui-lang="en"]) body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-disclosure :is(.px-prompt-disclosure__collapsed,.px-prompt-disclosure__expanded) > .px-lang-en,
  html[data-ui-lang="ar"] body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-disclosure :is(.px-prompt-disclosure__collapsed,.px-prompt-disclosure__expanded) > .px-lang-en {
    display: none !important;
  }

  html[data-ui-lang="en"] body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-disclosure :is(.px-prompt-disclosure__collapsed,.px-prompt-disclosure__expanded) > .px-lang-ar {
    display: none !important;
  }

  html[data-ui-lang="en"] body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-disclosure :is(.px-prompt-disclosure__collapsed,.px-prompt-disclosure__expanded) > .px-lang-en {
    display: inline !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
  }

  body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-disclosure > i {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-color: currentColor !important;
  }
}

/* ========================================================================
   PromXAI Theme 2.0.21-test490 — Desktop/Laptop native draggable prompt scroll
   The right detail shell already owns vertical scrolling. Expose that native
   scrollbar instead of the non-interactive decorative indicator so long
   expanded prompts can be dragged quickly without adding a second JS scroller.
   ======================================================================== */
@media (min-width: 981px) {
  body.single-promxai_prompt .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll {
    scrollbar-width: auto !important;
    scrollbar-color: rgb(var(--px-media-rgb, 123 63 242) / .72) rgba(255,255,255,.055) !important;
    scrollbar-gutter: stable !important;
  }

  body.single-promxai_prompt .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll::-webkit-scrollbar {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
  }

  body.single-promxai_prompt .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,.045) !important;
    border-radius: 999px !important;
  }

  body.single-promxai_prompt .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll::-webkit-scrollbar-thumb {
    min-height: 56px !important;
    border: 3px solid transparent !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #2f8cff 0%, #7244e8 58%, #d83fd6 100%) padding-box !important;
  }

  body.single-promxai_prompt .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #54a0ff 0%, #845cf0 58%, #e45add 100%) padding-box !important;
  }

  body.single-promxai_prompt .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator {
    display: none !important;
  }
}


/* ========================================================================
   PromXAI Theme 2.0.21-test492 — Expanded prompt instant start/end controls
   The controls exist only for a genuinely collapsible prompt after the user
   expands it. They reuse the existing page/right-panel scroll owner; no nested
   scroller, smooth-scroll timer, or second scroll authority is introduced.
   ======================================================================== */
body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-jump-nav {
  display:none;
}
body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-panel.is-collapsible.is-expanded > .px-prompt-jump-nav {
  position:sticky;
  top:14px;
  z-index:12;
  width:38px;
  height:78px;
  margin:0 auto -78px 4px;
  display:flex;
  flex-direction:column;
  gap:6px;
  pointer-events:auto;
}
body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-jump-nav > button {
  width:38px;
  height:36px;
  min-width:38px;
  min-height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(133,153,198,.24);
  border-radius:11px;
  color:#eef5ff;
  background:#172846;
  box-shadow:0 7px 18px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.055);
  font:900 20px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor:pointer;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transform:none;
}
body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-jump-nav > button:hover,
body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-jump-nav > button:focus-visible {
  border-color:rgba(98,151,255,.52);
  color:#fff;
  background:#20365d;
  outline:none;
}
body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-panel.is-expanded > .px-prompt-text {
  padding-left:46px;
}
html[data-theme="light"] body.single-promxai_prompt .px-prompt-detail-v2 .px-prompt-jump-nav > button {
  /* test506 — keep Prompt Detail quick navigation visually identical to the
     approved dark Phone controls even when the outer UI preference is light. */
  color:#eef5ff;
  border-color:rgba(133,153,198,.24);
  background:#172846;
  box-shadow:0 7px 18px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.055);
}