/**
 * PromXAI Theme 1.4.15.118 — compact preference toggles and phone video metadata.
 *
 * Scope: direct single-prompt pages classified as phones at first paint.
 * The runtime class persists through orientation changes, while desktop and iPad
 * remain owned by prompt-detail.css.
 */

.px-prompt-phone-viewer,
.px-prompt-phone-exit,
.px-prompt-phone-actions {
  display: none;
}

  html.px-prompt-phone-runtime body.single-promxai_prompt {
    --px-phone-view-bg: rgba(10, 15, 24, .96);
    --px-phone-view-soft: rgba(255, 255, 255, .06);
    --px-phone-view-border: rgba(255, 255, 255, .12);
    --px-phone-view-text: #f7f8fb;
    --px-phone-view-muted: #a8b1c1;
    --px-phone-view-shadow: 0 14px 34px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
    --px-phone-page-gap: 10px;
  }

  html.px-prompt-phone-runtime[data-theme="light"] body.single-promxai_prompt {
    --px-phone-view-bg: rgba(255, 255, 255, .97);
    --px-phone-view-soft: rgba(30, 42, 61, .055);
    --px-phone-view-border: rgba(35, 46, 64, .13);
    --px-phone-view-text: #171d28;
    --px-phone-view-muted: #697486;
    --px-phone-view-shadow: 0 14px 34px rgba(29, 41, 61, .13), inset 0 1px 0 rgba(255, 255, 255, .98);
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-main.px-prompt-detail-v2 {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--px-phone-page-gap) calc(24px + env(safe-area-inset-bottom, 0px));
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-detail-v2-grid {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  /* The historical desktop gallery is never part of the phone layout. */
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-media35 {
    display: none !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-viewer {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px 0 0;
  }

  /* Direct child of body: no transformed, clipped, filtered, or contained owner. */
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-exit {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 14px;
    left: auto;
    z-index: 2147483000;
    display: inline-grid;
    visibility: visible;
    opacity: 1;
    place-items: center;
    width: 50px;
    height: 50px;
    min-width: 50px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--px-phone-view-border);
    border-radius: 18px;
    color: var(--px-phone-view-text);
    background: var(--px-phone-view-bg);
    box-shadow: var(--px-phone-view-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
    direction: ltr;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt.admin-bar .px-prompt-phone-exit {
    top: calc(58px + env(safe-area-inset-top, 0px));
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-exit :is(svg, .px-icon) {
    width: 24px;
    height: 24px;
    transform: none;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-exit:active {
    opacity: .78;
    transform: scale(.96);
  }

  /* One active natural-ratio medium. No fixed stage and no neighboring slide. */
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-gallery,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-track {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-gallery {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--px-phone-view-border);
    border-radius: 24px;
    background: transparent;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
    touch-action: pan-y pinch-zoom;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-track {
    direction: ltr;
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide[hidden] {
    display: none;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide.is-active {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 23px;
    background: transparent;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide.is-active > img,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide.is-active > video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: inherit;
    object-fit: contain;
    object-position: center;
    background: transparent;
    -webkit-user-drag: none;
    user-select: none;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide.is-active > img {
    pointer-events: none;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide.is-active > video {
    aspect-ratio: var(--px-phone-media-ratio, auto);
    touch-action: pan-y pinch-zoom;
  }

  /* RC51: PRO is a fixed physical badge in the prompt viewer. It must not
     jump sides when the interface direction changes between Arabic and English. */
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide > :is(.px-pro-badge,.px-featured-badge) {
    top: 9px;
    width: 52px;
    min-width: 52px;
    height: 24px;
    min-height: 24px;
    padding: 0 6px;
    font-size: 8.5px;
    border-radius: 999px;
    box-sizing: border-box;
  }
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide > .px-pro-badge {
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    left: 9px !important;
    right: auto !important;
  }
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide > .px-featured-badge {
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    right: 9px !important;
    left: auto !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-control {
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    min-width: 70px;
    min-height: 70px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    color: #101827;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .96);
    transform: translate(-50%, -50%);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-control :is(svg, .px-icon) {
    width: 27px;
    height: 27px;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-control.is-buffering {
    opacity: 1;
    pointer-events: none;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-control.is-buffering > * {
    opacity: 0;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-control.is-buffering::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(16, 24, 39, .20);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: px-video-buffer-spin .72s linear infinite;
  }

  @keyframes px-video-buffer-spin {
    to { transform: rotate(360deg); }
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-control.is-playing {
    opacity: 0;
    pointer-events: none;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-control.is-playing.is-buffering {
    opacity: 1;
    pointer-events: none;
  }

  /* Compact phone video controls: the video keeps tap-to-play/pause while sound
   * and fullscreen stay explicitly available like the desktop player. */
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-tools {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 8;
    display: grid;
    grid-template-columns: 36px minmax(54px, 1fr) 36px 36px;
    align-items: center;
    gap: 7px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(8, 13, 23, .62);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px) scale(.985);
    transition: opacity .20s ease, transform .20s ease, visibility 0s linear .20s;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide.is-video-controls-visible .px-prompt-phone-video-tools {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-progress {
    --px-video-progress: 0%;
    width: 100%;
    min-width: 0;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    touch-action: none;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-progress::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #4f8cff 0%, #bf4cda var(--px-video-progress), rgba(255,255,255,.24) var(--px-video-progress), rgba(255,255,255,.24) 100%);
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-progress::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #6f79ff;
    box-shadow: 0 3px 10px rgba(0,0,0,.28);
    appearance: none;
    -webkit-appearance: none;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-progress::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.24);
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-progress::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #4f8cff, #bf4cda);
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-progress::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #6f79ff;
    box-shadow: 0 3px 10px rgba(0,0,0,.28);
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-tool {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    box-shadow: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-tool:active {
    transform: scale(.94);
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-tool :is(svg, .px-icon) {
    width: 19px;
    height: 19px;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-tool-pause { display: inline-grid; }
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-tool-play { display: none; }
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-tool--playback:not(.is-playing) .px-prompt-phone-tool-pause { display: none; }
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-tool--playback:not(.is-playing) .px-prompt-phone-tool-play { display: inline-grid; }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-volume-off {
    display: none;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-tool--sound.is-muted .px-prompt-phone-volume-on {
    display: none;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-tool--sound.is-muted .px-prompt-phone-volume-off {
    display: inline-grid;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide:fullscreen,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide:-webkit-full-screen {
    display: grid !important;
    place-items: center;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    background: #05070b !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide:fullscreen > video,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide:-webkit-full-screen > video {
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    object-fit: contain !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide:fullscreen .px-prompt-phone-video-tools,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide:-webkit-full-screen .px-prompt-phone-video-tools {
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    left: max(16px, env(safe-area-inset-left, 0px));
  }

  /* RC49 — fullscreen actions stay completely out of the normal phone canvas.
   * They appear only together with the on-demand video controls. */
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-fullscreen-tools {
    display: none;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide:fullscreen .px-prompt-phone-video-fullscreen-tools,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide:-webkit-full-screen .px-prompt-phone-video-fullscreen-tools {
    position: absolute;
    top: max(18px, env(safe-area-inset-top, 0px));
    right: max(18px, env(safe-area-inset-right, 0px));
    left: max(18px, env(safe-area-inset-left, 0px));
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-7px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide.is-video-controls-visible:fullscreen .px-prompt-phone-video-fullscreen-tools,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide.is-video-controls-visible:-webkit-full-screen .px-prompt-phone-video-fullscreen-tools {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-fs-tool {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    min-width: 46px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    color: #fff;
    background: rgba(8,13,23,.68);
    box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    pointer-events: auto;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-fs-tool:active {
    transform: scale(.92);
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-fs-tool :is(svg, .px-icon) {
    width: 21px;
    height: 21px;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-fs-tool--rotate.is-orientation-locked {
    border-color: rgba(129,105,255,.62);
    background: linear-gradient(145deg, rgba(51,116,255,.70), rgba(155,73,218,.70));
  }

  /* Small counter to the left, dots in the middle, expand on the right. */
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-status {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    clear: both;
    display: grid;
    grid-template-columns: auto minmax(28px, auto) 32px;
    align-items: center;
    justify-content: center;
    justify-self: center;
    place-self: center;
    gap: 5px;
    width: max-content;
    max-width: min(100%, 280px);
    min-height: 34px;
    margin: 7px auto 0 !important;
    padding: 2px 3px;
    border: 1px solid var(--px-phone-view-border);
    border-radius: 999px;
    color: var(--px-phone-view-text);
    background: var(--px-phone-view-bg);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .08);
    direction: ltr;
    -webkit-backdrop-filter: blur(14px) saturate(118%);
    backdrop-filter: blur(14px) saturate(118%);
    transform: none !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 38px;
    height: 28px;
    padding: 0 5px;
    color: var(--px-phone-view-muted);
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-counter strong {
    color: var(--px-phone-view-text);
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
    max-width: 170px;
    min-height: 28px;
    margin: 0;
    padding: 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-dots::-webkit-scrollbar {
    display: none;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    min-width: 6px;
    min-height: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--px-phone-view-muted) 58%, transparent);
    box-shadow: none;
    transition: width .18s ease, background-color .18s ease;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-dot.is-active,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-dot[aria-current="true"] {
    width: 17px;
    background: linear-gradient(90deg, #2f8cff, #7b3ff2, #e64ac8);
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-expand {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--px-phone-view-text);
    background: var(--px-phone-view-soft);
    box-shadow: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-expand :is(svg, .px-icon) {
    width: 17px;
    height: 17px;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-expand:disabled {
    opacity: .3;
    cursor: default;
  }

  /* Approved order: favorite, active prompt copy, share, more. */
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-actions {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(var(--px-prompt-phone-action-count, 4), minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    min-height: 64px;
    margin: 8px 0 15px;
    padding: 4px 0;
    border: 0;
    border-block: 1px solid var(--px-phone-view-border);
    color: var(--px-phone-view-text);
    background: transparent;
    direction: ltr;
    overflow: visible;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-action,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more > summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 54px;
    margin: 0;
    padding: 5px 2px;
    border: 0;
    border-radius: 15px;
    color: var(--px-phone-view-muted);
    background: transparent;
    box-shadow: none;
    list-style: none;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more > summary::-webkit-details-marker {
    display: none;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-action:is(:hover, :focus-visible),
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more[open] > summary,
  html.px-prompt-phone-runtime body.single-promxai_prompt [data-copy-state="success"] {
    color: var(--px-phone-view-text);
    background: var(--px-phone-view-soft);
  }

  /* One favorite language across phone detail pages: neutral outline when idle,
   * solid PromXAI blue when saved. */
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-action[data-favorite-id]:is(.is-saved, [aria-pressed="true"]) {
    color: #6f83ff !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-action[data-favorite-id] :is(svg, .px-icon) {
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 50%;
    box-sizing: border-box;
    background: transparent;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-action[data-favorite-id]:is(.is-saved, [aria-pressed="true"]) :is(svg, .px-icon) {
    color: #fff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    background: linear-gradient(145deg, #4d83ff, #7254f4 58%, #d54bc9);
    box-shadow: 0 7px 18px rgba(83, 94, 239, .28), inset 0 1px 0 rgba(255,255,255,.30);
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-action[data-favorite-id]:is(.is-saved, [aria-pressed="true"]) path {
    color: #fff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  /* Favorite motion is globally owned by favorite-feedback.css in RC48. */

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-action :is(svg, .px-icon),
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more > summary :is(svg, .px-icon) {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-action > span,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more > summary > span {
    max-width: 100%;
    font-size: 10px;
    line-height: 1.15;
    font-weight: 750;
    white-space: nowrap;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more {
    position: relative;
    min-width: 0;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more__menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 9px);
    z-index: 100030;
    display: grid;
    gap: 10px;
    width: min(300px, calc(100vw - 24px));
    padding: 12px;
    border: 1px solid var(--px-phone-view-border);
    border-radius: 22px;
    color: var(--px-phone-view-text);
    background: var(--px-phone-view-bg);
    box-shadow: var(--px-phone-view-shadow);
    -webkit-backdrop-filter: blur(20px) saturate(124%);
    backdrop-filter: blur(20px) saturate(124%);
    direction: rtl;
  }

  html.px-prompt-phone-runtime[data-ui-lang="en"] body.single-promxai_prompt .px-prompt-phone-more__menu {
    direction: ltr;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more__menu {
    gap: 8px;
    width: min(286px, calc(100vw - 24px));
    padding: 10px;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more__toggle {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 9px 11px;
    border: 1px solid var(--px-phone-view-border);
    border-radius: 17px;
    color: var(--px-phone-view-text);
    background: var(--px-phone-view-soft);
    box-shadow: none;
    font: inherit;
    text-align: start;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more__toggle:is(:hover, :focus-visible) {
    border-color: rgba(79,109,245,.42);
    background: rgba(79,109,245,.09);
    transform: translateY(-1px);
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more__toggle-icon {
    grid-column: 1;
    grid-row: 1;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--px-phone-view-border);
    border-radius: 13px;
    color: #4f6df5;
    background: color-mix(in srgb, #4f6df5 10%, var(--px-phone-view-bg));
    opacity: 1;
    visibility: visible;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more__toggle-icon :is(svg, .px-icon) {
    width: 20px;
    height: 20px;
  }

  html.px-prompt-phone-runtime[data-theme="light"] body.single-promxai_prompt .px-prompt-phone-more__toggle-icon--moon,
  html.px-prompt-phone-runtime[data-theme="dark"] body.single-promxai_prompt .px-prompt-phone-more__toggle-icon--sun {
    opacity: 0;
    visibility: hidden;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more__toggle-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
    line-height: 1.2;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more__toggle-copy > strong {
    min-width: 0;
    color: var(--px-phone-view-text);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more__state {
    display: none;
    color: var(--px-phone-view-muted);
    font-size: 10px;
    font-weight: 800;
  }

  html.px-prompt-phone-runtime[data-theme="light"] body.single-promxai_prompt .px-prompt-phone-more__state--light,
  html.px-prompt-phone-runtime[data-theme="dark"] body.single-promxai_prompt .px-prompt-phone-more__state--dark,
  html.px-prompt-phone-runtime[data-ui-lang="ar"] body.single-promxai_prompt .px-prompt-phone-more__state--ar,
  html.px-prompt-phone-runtime[data-ui-lang="en"] body.single-promxai_prompt .px-prompt-phone-more__state--en {
    display: block;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more__switch {
    position: relative;
    width: 46px;
    height: 26px;
    border: 1px solid var(--px-phone-view-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--px-phone-view-muted) 16%, transparent);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / .08);
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more__switch > i {
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 7px rgb(0 0 0 / .20);
    transition: transform .2s ease;
  }

  html.px-prompt-phone-runtime[data-theme="dark"] body.single-promxai_prompt .px-prompt-phone-more__switch {
    border-color: rgba(79,109,245,.38);
    background: #4f6df5;
  }

  html.px-prompt-phone-runtime[data-theme="dark"] body.single-promxai_prompt .px-prompt-phone-more__switch > i {
    transform: translateX(20px);
  }

  html[dir="rtl"].px-prompt-phone-runtime[data-theme="dark"] body.single-promxai_prompt .px-prompt-phone-more__switch > i {
    transform: translateX(-20px);
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more__lang-code {
    width: 46px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(79,109,245,.30);
    border-radius: 999px;
    color: #4f6df5;
    background: rgba(79,109,245,.10);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .04em;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more__lang-code > b {
    display: none;
  }

  html.px-prompt-phone-runtime[data-ui-lang="ar"] body.single-promxai_prompt .px-prompt-phone-more__lang-code-ar,
  html.px-prompt-phone-runtime[data-ui-lang="en"] body.single-promxai_prompt .px-prompt-phone-more__lang-code-en {
    display: block;
  }

  /* RC2 phone prompt contract: the active image selects its prompt scene
   * automatically. Customers never need internal “Prompt 1/2/3” scene labels;
   * they only choose which language to view/copy. */
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-scene-switcher:not(.is-shared-all) {
    display: none !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-scene-switcher.is-shared-all {
    display: flex !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    padding: 4px !important;
    overflow: visible !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-scene-switcher.is-shared-all .px-prompt-scene-button--shared {
    min-width: 116px !important;
    min-height: 32px !important;
    padding: 6px 11px !important;
    font-size: 10px !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 5px !important;
    border: 1px solid var(--px-phone-view-border) !important;
    border-radius: 18px !important;
    background: var(--px-phone-view-soft) !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-tabs > button {
    min-height: 51px !important;
    padding: 7px 9px !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: var(--px-phone-view-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-tabs > button.is-active {
    color: var(--px-phone-view-text) !important;
    border-color: rgba(109, 83, 242, .38) !important;
    background: linear-gradient(135deg, rgba(55, 108, 244, .17), rgba(139, 77, 232, .20)) !important;
    box-shadow: inset 0 0 0 1px rgba(119, 83, 238, .10), 0 8px 22px rgba(41, 52, 120, .12) !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-tab-label--desktop {
    display: none !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-tab-label--phone {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-tab-label--phone > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-tab-label--phone > b {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    background: linear-gradient(135deg, #397cf3, #8852e8) !important;
    font-size: 8px !important;
    font-weight: 950 !important;
    letter-spacing: .04em !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important;
  }

  /* RC44 phone parity: use the same single active-language copy action as
   * laptop/desktop. It sits immediately below the Arabic/English selector and
   * before the prompt text; duplicate panel-level copy buttons stay hidden. */
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-language-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--px-phone-view-border) !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-language-row .px-prompt-tabs {
    margin: 0 !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-top-copy {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 15px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    color: #fff !important;
    background: linear-gradient(105deg, #2f8cff 0%, #7162f4 54%, #bd42c7 100%) !important;
    box-shadow: 0 12px 28px rgba(91, 76, 220, .20), inset 0 1px 0 rgba(255,255,255,.22) !important;
    cursor: pointer !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-top-copy .px-icon {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-top-copy:active {
    transform: scale(.992) !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-top-copy.is-copied {
    color: #fff !important;
    background: linear-gradient(105deg, #159b74 0%, #2cc98d 100%) !important;
    border-color: rgba(151, 255, 211, .30) !important;
    box-shadow: 0 12px 28px rgba(30, 160, 111, .20), inset 0 1px 0 rgba(255,255,255,.22) !important;
  }

  html[data-theme="light"].px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-top-copy {
    color: #fff !important;
    border-color: rgba(73, 93, 180, .12) !important;
    background: linear-gradient(105deg, #2f8cff 0%, #7162f4 54%, #bd42c7 100%) !important;
    box-shadow: 0 12px 26px rgba(75, 89, 181, .18), inset 0 1px 0 rgba(255,255,255,.25) !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-panel > .px-copy-button {
    display: none !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-column,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-right-panel,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-stage,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-right-panel__scroll {
    position: static;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-right-scroll-indicator {
    display: none;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-related-grid-section,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-related-grid-section .px-related-strip {
    height: auto;
    max-height: none;
    overflow: visible;
    touch-action: pan-y;
  }

  /* Natural-ratio two-column masonry. No 9:16 card derivative or fixed row
   * height is allowed to own related prompt artwork on phone. */
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-related-grid-section .px-related-strip {
    display: block;
    width: 100%;
    padding: 0;
    columns: 2;
    column-gap: 10px;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-related-grid-section .px-related-mini {
    position: relative;
    display: inline-block;
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: auto;
    margin: 0 0 10px;
    overflow: hidden;
    break-inside: avoid;
    page-break-inside: avoid;
    vertical-align: top;
    line-height: 0;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-related-grid-section .px-related-mini > img {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-toast {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

@media (max-width: 370px) {
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-status {
    max-width: 220px;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-action > span,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-more > summary > span {
    font-size: 9px;
  }
}


/* 1.4.15.130 — related prompts on phone inherit the same natural-ratio
 * masonry behavior as the Home and Favorites feeds, even outside the
 * dedicated phone runtime wrapper. */
@media (max-width: 760px) {
  body.single-promxai_prompt .px-related-grid-section,
  body.single-promxai_prompt .px-related-grid-section .px-related-strip {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.single-promxai_prompt .px-related-grid-section .px-related-strip {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    columns: 2 !important;
    column-gap: 10px !important;
    scroll-snap-type: none !important;
  }

  body.single-promxai_prompt .px-related-grid-section .px-related-mini {
    position: relative !important;
    display: inline-block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 0 10px !important;
    overflow: hidden !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    vertical-align: top !important;
  }

  body.single-promxai_prompt .px-related-grid-section .px-related-mini > img {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}


/* 1.4.15.131 — phone prompt detail centering + PRO blur consistency */
@media (max-width: 760px) {
  body.single-promxai_prompt .px-media35-stage,
  body.single-promxai_prompt [data-main-visual],
  body.single-promxai_prompt [data-media-frame] {
    display: grid !important;
    place-items: center !important;
  }

  body.single-promxai_prompt .px-media61-main-image,
  body.single-promxai_prompt .px-media61-main-video,
  body.single-promxai_prompt .px-related-grid-section .px-related-mini > img {
    display: block !important;
    margin-inline: auto !important;
    object-position: center center !important;
    justify-self: center !important;
    align-self: center !important;
  }

  body.single-promxai_prompt .px-related-grid-section .px-related-mini.is-locked > img {
    filter: blur(2.1px) saturate(.80) brightness(.72) !important;
    transform: scale(1.022) !important;
  }

  body.single-promxai_prompt .px-related-grid-section .px-related-mini.is-locked::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7,11,20,.04), rgba(7,11,20,.22));
    z-index: 1;
    pointer-events: none;
  }
}


/* 1.4.15.132 — visible, subtle PRO lock in phone related cards. */
@media (max-width: 760px) {
  body.single-promxai_prompt .px-related-grid-section .px-related-mini .px-card-lock {
    position: absolute !important;
    z-index: 4 !important;
    top: 50% !important;
    left: 50% !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    background: rgba(7,10,18,.44) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
    transform: translate(-50%,-50%) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
  }
  body.single-promxai_prompt .px-related-grid-section .px-related-mini .px-card-lock .px-icon {
    width: 20px !important;
    height: 20px !important;
  }
}

/* 1.4.15.139 — safe phone prompt centering.
 * Keep the established document width; never shift the main container with
 * 50vw/negative margins. One box-sizing owner gives equal physical gutters. */
@media (max-width: 760px) {
  html.px-prompt-phone-runtime body.single-promxai_prompt {
    overflow-x: hidden !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-main.px-prompt-detail-v2 {
    position: static !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    padding-inline: 12px !important;
    transform: none !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-viewer,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-gallery,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-track,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide.is-active {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide.is-active > img,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-slide.is-active > video {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-inline: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}


/* 2.0.0-RC2 — prompt language labels are customer-facing on phone only. */
@media (min-width: 761px) {
  body.single-promxai_prompt .px-prompt-tab-label--phone { display: none !important; }
  body.single-promxai_prompt .px-prompt-tab-label--desktop { display: inline !important; }
}


@media (prefers-reduced-motion: reduce) {
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-video-tools {
    transition: none !important;
  }
}

/* RC77 — authorized image downloads are a first-class fifth prompt action.
   The toolbar count is synchronized by prompt-downloads.js and drops back to
   four actions for video or inaccessible PRO media. */
html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-action--download {
  text-decoration: none;
}
html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-phone-action--download[hidden] {
  display: none !important;
}

/* ========================================================================
   test487 — canonical Phone Prompt bounded-paint + text-wrap owner
   Root cause: test486 correctly removed the nested vertical scroller, but its
   overflow:visible handoff also removed the paint boundary between the prompt
   information card and the following copy card. On affected Samsung/Android
   compositors the full-width gradient copy control could occasionally repaint
   a stale tile outside its own card while scrolling, visually covering the
   summary / actions / compatibility row above it even though layout and DOM
   remained correct. Long unbroken separator/token lines inside prompt text also
   had no Phone-specific arbitrary-break contract, so they could paint past the
   inline edge. Phone keeps natural document height and one page scroll owner,
   but cards clip descendant paint without becoming nested scrollers; compact
   gradient actions receive fixed paint boxes, and prompt text wraps arbitrary
   long tokens inside the card. Non-Phone geometry and content are unchanged.
   ======================================================================== */
@media (max-width: 760px) {
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-head,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-copy-card {
    position: relative !important;
    box-sizing: border-box !important;
    height: auto !important;
    max-height: none !important;
    overflow: clip !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-copy-card .px-prompt-panel,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-copy-card .px-prompt-text {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-copy-card .px-prompt-text {
    overflow-x: clip !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-copy-card .px-prompt-text p {
    box-sizing: border-box !important;
    max-width: 100% !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* These are small fixed controls, not layout surfaces. Give their gradient
     paint a strict local box so a compositor tile cannot escape into another
     section. Geometry and colors remain unchanged. */
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-primary-actions .px-primary-button,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-primary-actions .px-explain-button {
    position: relative !important;
    height: 51px !important;
    min-height: 51px !important;
    max-height: 51px !important;
    overflow: hidden !important;
    transform: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    will-change: auto !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-top-copy,
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-top-copy:active {
    position: relative !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    overflow: hidden !important;
    transform: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    will-change: auto !important;
    transition: none !important;
  }
}


/* ========================================================================
   PromXAI Theme 2.0.21-test488 — Phone Prompt progressive disclosure
   Keep the page as the only vertical scroll owner. Long prompt copy is clipped
   only in the compact state; expanding restores natural document height.
   ======================================================================== */
@media (max-width: 760px) {
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-copy-card .px-prompt-panel.is-collapsible:not(.is-expanded) .px-prompt-text {
    max-height: var(--px-prompt-collapse-height, clamp(360px, 52svh, 520px)) !important;
    overflow-x: clip !important;
    overflow-y: hidden !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-copy-card .px-prompt-panel.is-expanded .px-prompt-text {
    max-height: none !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-disclosure {
    min-height: 48px !important;
    margin-top: 10px !important;
    border-color: rgba(135,153,194,.18) !important;
    background: rgba(255,255,255,.035) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  html[data-theme="light"].px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-disclosure {
    border-color: rgba(71,85,105,.15) !important;
    background: rgba(255,255,255,.56) !important;
  }
}


/* test492 — Phone expanded-prompt jump control uses the page scroll owner. */
@media (max-width:760px) {
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-panel.is-collapsible.is-expanded > .px-prompt-jump-nav {
    top:calc(10px + env(safe-area-inset-top,0px));
    margin-left:2px;
  }
  html.px-prompt-phone-runtime body.single-promxai_prompt .px-prompt-panel.is-expanded > .px-prompt-text {
    padding-left:44px !important;
  }
}

/* ========================================================================
   PromXAI Theme 2.0.21-test509 — Phone Prompt instant ↑/↓ viewport jumps.
   The global foundation owns `html { scroll-behavior:smooth; }`; on the phone
   Prompt Detail page that makes the existing behavior:auto jump visibly travel
   through very long prompts. Phone runtime owns an instant viewport instead.
   Manual touch scrolling is unaffected.
   ======================================================================== */
@media (max-width:760px) {
  html.px-prompt-phone-runtime {
    scroll-behavior: auto !important;
  }
}