/**
 * PromXAI Theme 1.4.15.108 — canonical phone detail owner.
 *
 * Library detail phone owner only:
 * - prompt detail geometry is owned exclusively by prompt-mobile.css;
 * - library details keep their shared floating back and action controls here;
 * - desktop/iPad toolbars remain outside this phone scope.
 */

.px-mobile-prompt-canonical,
.px-phone-detail-back,
.px-phone-detail-actions,
.px-phone-library-badges {
  display: none;
}

/* Historical desktop toolbars are marked hidden in PHP so they never flash on
 * phones. Restore them only for the desktop/tablet owners. */
@media (min-width: 761px) {
  body.single-promxai_library [data-desktop-library-toolbar][hidden] {
    display: flex !important;
  }

  body.single-promxai_library [data-desktop-detail-back][hidden] {
    display: inline-flex !important;
  }
}

@media (max-width: 760px) {
  html.px-phone-ui body.single-promxai_library {
    --px-phone-action-surface: rgba(11,16,26,.88);
    --px-phone-action-border: rgba(255,255,255,.12);
    --px-phone-action-text: #f7f8fb;
    --px-phone-action-muted: #aeb6c5;
    --px-phone-action-shadow: 0 12px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10);
    --px-phone-media-surface: rgba(16,22,34,.88);
    --px-phone-media-border: rgba(137,118,255,.26);
  }

  html.px-phone-ui[data-theme="light"] body.single-promxai_library {
    --px-phone-action-surface: rgba(255,255,255,.92);
    --px-phone-action-border: rgba(54,62,78,.13);
    --px-phone-action-text: #17202d;
    --px-phone-action-muted: #6f7886;
    --px-phone-action-shadow: 0 12px 28px rgba(36,43,56,.10), inset 0 1px 0 rgba(255,255,255,.98);
    --px-phone-media-surface: rgba(248,248,252,.94);
    --px-phone-media-border: rgba(118,101,236,.25);
  }

  /* Desktop/detail owners are never allowed to paint on a phone. */
  html.px-phone-ui body.single-promxai_library [data-desktop-library-toolbar],
  html.px-phone-ui body.single-promxai_library .px-library91-toolbar,
  html.px-phone-ui body.single-promxai_library .px-library77-toolbar,
  html.px-phone-ui body.single-promxai_library :is(
    .px-library91-back,
    .px-library81-back,
    .px-library65-tool--back,
    .px-library63-toolbar__back,
    .px-library62-detail__back
  ) {
    display: none !important;
  }

  /* One floating back button. It lives outside media overflow in PHP. */
  html.px-phone-ui body.single-promxai_library .px-phone-detail-back {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top,0px));
    right: 14px;
    left: auto;
    z-index: 99980;
    width: 50px;
    height: 50px;
    min-width: 50px;
    padding: 0;
    border: 1px solid var(--px-phone-action-border);
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--px-phone-action-text);
    background: var(--px-phone-action-surface);
    box-shadow: var(--px-phone-action-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
    direction: ltr;
    transform: none;
    touch-action: manipulation;
    cursor: pointer;
  }

  html.px-phone-ui body.admin-bar .px-phone-detail-back {
    top: calc(58px + env(safe-area-inset-top,0px));
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-back :is(svg,.px-icon) {
    width: 24px;
    height: 24px;
    transform: none;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-back:active {
    opacity: .74;
    transform: scale(.96);
  }

  /* One structural phone owner for every library kind. The real cover is used
   * once; no duplicate hidden mobile image is rendered. */
  html.px-phone-ui body.single-promxai_library .px-phone-detail-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-media {
    order: 1 !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: calc(100% - 16px) !important;
    max-width: 560px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 16px auto 0 !important;
    padding: 9px !important;
    border: 1px solid var(--px-phone-media-border) !important;
    border-radius: 28px !important;
    background: var(--px-phone-media-surface) !important;
    box-shadow: 0 12px 28px rgba(20,24,40,.08), inset 0 1px 0 rgba(255,255,255,.20) !important;
    overflow: hidden !important;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-media :is(
    .px-library97-cover,
    .px-library79-cover,
    .px-library90-cover,
    .px-library77-cover
  ),
  html.px-phone-ui body.single-promxai_library .px-phone-detail-media:is(
    .px-library97-cover,
    .px-library79-cover,
    .px-library90-cover,
    .px-library77-cover
  ) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-media :is(img,picture),
  html.px-phone-ui body.single-promxai_library .px-phone-detail-media picture > img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 20px !important;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-media::before,
  html.px-phone-ui body.single-promxai_library .px-phone-detail-media::after,
  html.px-phone-ui body.single-promxai_library .px-phone-detail-media :is(.px-library90-cover-wrap,.px-library92-shared-cover-wrap)::before {
    content: none !important;
    display: none !important;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-hero > .px-phone-detail-actions {
    order: 2 !important;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-hero > :is(
    .px-library97-info,
    .px-library79-info,
    .px-library90-copy,
    .px-library77-product-info
  ) {
    order: 4 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }

  html.px-phone-ui body.single-promxai_library .px-library91-badges {
    display: none !important;
  }

  /* The three semantic badges belong directly below the phone action row. */
  html.px-phone-ui body.single-promxai_library .px-phone-library-badges {
    order: 3 !important;
    width: min(calc(100% - 18px), 520px);
    min-width: 0;
    margin: 0 auto 18px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    justify-content: center;
    gap: 7px;
    direction: rtl;
  }

  html.px-phone-ui[data-ui-lang="en"] body.single-promxai_library .px-phone-library-badges {
    direction: ltr;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-library-badge {
    min-width: 0;
    min-height: 34px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    box-shadow: 0 7px 17px rgba(21, 29, 46, .12), inset 0 1px 0 rgba(255,255,255,.18);
    font-size: 9.5px;
    line-height: 1;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-library-badge :is(svg,.px-icon) {
    width: 14px;
    height: 14px;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-article { background: linear-gradient(135deg,#f59e0b,#f97316); }
  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-book { background: linear-gradient(135deg,#16a34a,#22c55e); }
  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-template { background: linear-gradient(135deg,#7c3aed,#a855f7); }
  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-bundle { background: linear-gradient(135deg,#2563eb,#0ea5e9); }
  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-display { background: linear-gradient(135deg,#db2777,#9333ea); }
  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-display.is-new,
  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-display.is-release { background: linear-gradient(135deg,#2563eb,#7c3aed); }
  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-display.is-featured,
  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-display.is-editor { background: linear-gradient(135deg,#db2777,#9333ea); }
  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-display.is-available,
  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-display.is-free { background: linear-gradient(135deg,#0f9f76,#14b8a6); }
  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-display.is-soon { background: linear-gradient(135deg,#64748b,#475569); }
  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-free { background: linear-gradient(135deg,#059669,#14b8a6); }
  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-pro { background: linear-gradient(135deg,#4f46e5,#7c3aed); }
  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-one_time { background: linear-gradient(135deg,#d97706,#f59e0b); }
  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-both { background: linear-gradient(135deg,#2563eb,#7c3aed); }
  html.px-phone-ui body.single-promxai_library .px-phone-library-badge.is-coming_soon { background: linear-gradient(135deg,#64748b,#475569); }

  /* One action row immediately after the canonical artwork. */
  html.px-phone-ui body.single-promxai_library .px-phone-detail-actions {
    position: relative;
    z-index: 6;
    width: min(calc(100% - 8px),520px);
    min-height: 68px;
    margin: 10px auto 9px;
    padding: 7px 10px;
    border: 1px solid var(--px-phone-action-border);
    border-radius: 22px;
    display: grid;
    grid-template-columns: repeat(var(--px-phone-action-count,3),minmax(0,1fr));
    align-items: stretch;
    gap: 4px;
    color: var(--px-phone-action-text);
    background: var(--px-phone-action-surface);
    box-shadow: var(--px-phone-action-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(122%);
    backdrop-filter: blur(18px) saturate(122%);
    direction: ltr;
    overflow: visible;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-actions--library { --px-phone-action-count: 3; }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-action,
  html.px-phone-ui body.single-promxai_library .px-phone-detail-more > summary {
    min-width: 0;
    min-height: 54px;
    padding: 6px 4px;
    border: 0;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--px-phone-action-muted);
    background: transparent;
    box-shadow: none;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-more > summary::-webkit-details-marker {
    display: none;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-action:hover,
  html.px-phone-ui body.single-promxai_library .px-phone-detail-action:focus-visible,
  html.px-phone-ui body.single-promxai_library .px-phone-detail-more[open] > summary {
    color: var(--px-phone-action-text);
    background: rgba(127,127,127,.08);
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-action[data-favorite-id]:is(.is-saved, [aria-pressed="true"]) {
    color: #4f6df5 !important;
    border-color: rgba(79, 109, 245, .22) !important;
    background: rgba(79, 109, 245, .12) !important;
    box-shadow: inset 0 0 0 1px rgba(79, 109, 245, .22) !important;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-action[data-favorite-id] :is(svg,.px-icon) {
    width: 24px;
    height: 24px;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-action[data-favorite-id]:is(.is-saved, [aria-pressed="true"]) :is(svg,.px-icon,path) {
    color: #4f6df5 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-action :is(svg,.px-icon),
  html.px-phone-ui body.single-promxai_library .px-phone-detail-more > summary :is(svg,.px-icon) {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
  }

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

  html.px-phone-ui body.single-promxai_library .px-phone-detail-more {
    position: relative;
    min-width: 0;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-more__menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 99990;
    width: 172px;
    padding: 7px;
    border: 1px solid var(--px-phone-action-border);
    border-radius: 18px;
    display: grid;
    gap: 4px;
    color: var(--px-phone-action-text);
    background: var(--px-phone-action-surface);
    box-shadow: var(--px-phone-action-shadow);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    backdrop-filter: blur(20px) saturate(125%);
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-more__menu button {
    width: 100%;
    min-height: 44px;
    padding: 0 11px;
    border: 0;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    color: inherit;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-more__menu button:hover,
  html.px-phone-ui body.single-promxai_library .px-phone-detail-more__menu button:focus-visible {
    background: rgba(127,127,127,.08);
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-more__menu :is(svg,.px-icon) {
    width: 19px;
    height: 19px;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-more__menu [data-theme-toggle] .px-theme-icon {
    display: none;
    width: 19px;
    height: 19px;
    border-radius: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
  }

  html.px-phone-ui[data-theme="dark"] body.single-promxai_library .px-phone-detail-more__menu [data-theme-toggle] .px-theme-icon--moon,
  html.px-phone-ui[data-theme="light"] body.single-promxai_library .px-phone-detail-more__menu [data-theme-toggle] .px-theme-icon--sun {
    display: grid;
  }

}

@media (max-width: 370px) {
  html.px-phone-ui body.single-promxai_library .px-phone-detail-actions {
    min-height: 64px;
    padding-inline: 6px;
    border-radius: 20px;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-action,
  html.px-phone-ui body.single-promxai_library .px-phone-detail-more > summary {
    min-height: 50px;
  }

  html.px-phone-ui body.single-promxai_library .px-phone-detail-action > span,
  html.px-phone-ui body.single-promxai_library .px-phone-detail-more > summary > span {
    font-size: 9px;
  }
}