/**
 * PromptJo Theme Custom CSS & Overrides
 * Matches exact styling of the React Demo
 */

@layer base {
  body, html, input, button, select, textarea, .pj-font-primary {
    font-family: var(--pj-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  }
}

/* Ensure code, monospace and icon fonts are never overridden */
code, kbd, samp, pre, .font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}
.dashicons, [class^="dashicons-"] {
  font-family: dashicons !important;
}

/* Prompt Grid layout: Mobile single-column (up to 358px), Desktop multi-column */
.pj-prompt-grid {
  display: grid;
  grid-template-columns: minmax(0, 358px);
  gap: 20px;
  justify-content: center;
  justify-items: center;
  width: 100%;
}

@media (min-width: 640px) {
  .pj-prompt-grid {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 24px;
  }
}

/* Hide scrollbars while keeping scroll functionality */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Shadow Glow Utilities */
.shadow-glow-sm {
  box-shadow: 0 0 16px rgba(217, 119, 87, 0.25);
}
.shadow-glow-md {
  box-shadow: 0 0 28px rgba(217, 119, 87, 0.4);
}

/* Line Clamp Utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hero Floating Showcase Cards: STRICTLY ZERO ON MOBILE (< 1024px) */
@media (max-width: 1023px) {
  #pj-hero-floating-cards,
  .pj-hero-floating-cards-wrapper {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  #pj-hero-floating-cards,
  .pj-hero-floating-cards-wrapper {
    display: flex !important;
  }
}

/* Mobile App-like Bottom Navigation Safe Area Space (< 768px) */
@media (max-width: 767px) {
  body {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Prompt Types / Category Chips: Guaranteed maximum 2 rows on mobile (< 640px) via 2-row grid auto-flow */
@media (max-width: 639px) {
  .pj-hero-category-chips {
    display: grid !important;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: center;
    gap: 6px;
  }
}

/* Desktop Footer, Subnav & MegaMenu: Reliably suppressed below 768px */
@media (max-width: 767px) {
  #site-footer,
  .pj-desktop-footer,
  .pj-desktop-subnav,
  #pj-mega-menu {
    display: none !important;
  }
}

.pj-desktop-presentation {
  display: block !important;
}



/* PromptJo 4-Line Clamp Utility for Single Prompt */
.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* PromptJo V16.3.3: Fixed Bottom Navigation Viewport Padding */
#single-prompt-hero-container {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
}

@media (min-width: 768px) {
  #single-prompt-hero-container {
    padding-bottom: 2rem !important;
  }
}

/* PromptJo V16.3.3: Expandable Prompt Box Chevron Motion Safe Transition */
#pj-prompt-expand-icon {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  #pj-prompt-expand-icon,
  #pj-mobile-bottom-nav {
    transition: none !important;
  }
}

/* ==========================================================================
   PromptJo V16.3.17 — Mobile Foundation & Navigation Enhancements
   ========================================================================== */

/* 1. App-like tap highlight & smooth touch response */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    -webkit-tap-highlight-color: transparent;
  }

  /* 2. Standardized Touch Targets (Min 44x44px for primary controls) */
  .pj-touch-control {
    min-width: 44px;
    min-height: 44px;
  }

  /* 3. Mobile Header Blur & Elevation */
  .pj-mobile-header-blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* 4. Active Bottom Nav Subtle Indicator */
  #pj-mobile-bottom-nav [aria-label] {
    position: relative;
  }

  /* 5. Safe Area Insets for Modern Mobile Displays */
  #pj-mobile-bottom-nav {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0.5rem));
  }
}

/* ==========================================================================
   PromptJo V16.3.18 — Mobile App-First UX & UI Refinements
   ========================================================================== */

@media (max-width: 767px) {
  /* Prevent iOS automatic input zooming on focus */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Smooth mobile touch active response */
  button:active,
  a:active,
  .pj-touch-active:active {
    transform: scale(0.97);
  }

  /* Enhanced mobile sheet transitions */
  .pj-mobile-sheet {
    -webkit-overflow-scrolling: touch;
  }
}



/* ==========================================================================
   PromptJo V16.3.19 — Complete Mobile App-First UX Corrections
   ========================================================================== */
@media (max-width: 767px) {
  /* Profile Card Mobile Balance & RTL Polish */
  .pj-profile-header-card {
    padding: 1.25rem 1rem !important;
  }
  
  /* Ensure user bio never wraps awkwardly or overflows */
  .pj-profile-bio-text {
    line-height: 1.8 !important;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: right !important;
  }

  /* Account & Edit forms standard 44px touch targets */
  .pj-mobile-action-btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Two equal 50% columns side-by-side for mobile action buttons */
  .pj-profile-buttons-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.625rem !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   PromptJo V16.3.20 — Mobile Web App Architecture Styles
   ========================================================================== */
@media (max-width: 767px) {
  /* Dedicated Mobile Web App Buttons */
  .pj-mobile-tab-btn {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .pj-mobile-tab-btn:active {
    transform: scale(0.97);
  }
  
  /* Operational Support Card Enhancements */
  #pj-profile-new-ticket-btn {
    width: 100% !important;
  }
}


/* ==========================================================================
   PromptJo Search Dropdown & Scoped Search Bar (V16.9.16 Mockup v2)
   Strictly scoped to Search & Preview selectors — zero global layout changes
   ========================================================================== */
.pj-hero-search-wrapper > .pj-search-form,
.pj-hero-search-wrapper > #pj-explore-search-form {
  height: 58px;
  border: 1px solid #a95f49;
  border-radius: 16px;
  background-color: #222730;
  padding: 6px 8px 6px 7px;
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.pj-hero-search-wrapper > .pj-search-form:hover,
.pj-hero-search-wrapper > .pj-search-form:focus-within,
.pj-hero-search-wrapper > #pj-explore-search-form:hover,
.pj-hero-search-wrapper > #pj-explore-search-form:focus-within {
  border-color: #d97757;
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.14), 0 12px 28px rgba(0, 0, 0, 0.35);
}

.pj-hero-search-wrapper > .pj-search-form input,
.pj-hero-search-wrapper > #pj-explore-search-form input {
  color: #f4f5f7;
  font-size: 14px;
}

.pj-hero-search-wrapper > .pj-search-form input::placeholder,
.pj-hero-search-wrapper > #pj-explore-search-form input::placeholder {
  color: #b8c0ca;
}

.pj-hero-search-wrapper > .pj-search-form button[type="submit"],
.pj-hero-search-wrapper > #pj-explore-search-form button[type="submit"] {
  height: 44px;
  border: 0;
  border-radius: 12px;
  background-color: #d97757;
  color: #211713;
  font-weight: 800;
  padding: 0 21px;
  box-shadow: 0 3px 12px rgba(217, 119, 87, 0.22);
  transform: none;
}

.pj-hero-search-wrapper > .pj-search-form button[type="submit"]:hover,
.pj-hero-search-wrapper > #pj-explore-search-form button[type="submit"]:hover {
  background-color: #e58a6d;
  color: #211713;
}

@media (max-width: 600px) {
  .pj-hero-search-wrapper > .pj-search-form,
  .pj-hero-search-wrapper > #pj-explore-search-form {
    height: 52px;
  }
  .pj-hero-search-wrapper > .pj-search-form button[type="submit"],
  .pj-hero-search-wrapper > #pj-explore-search-form button[type="submit"] {
    height: 38px;
    padding: 0 16px;
  }
}

.pj-search-suggestions-container {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  left: 0;
  z-index: 60;
  background-color: #191d24;
  border: 1px solid #303741;
  border-radius: 17px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.72), 0 6px 16px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  max-height: 380px;
  overflow-y: auto;
  direction: rtl;
  text-align: right;
  animation: pjSuggestionsFadeIn 0.16s ease-out;
}

@keyframes pjSuggestionsFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pj-search-suggestions-container.hidden {
  display: none !important;
}

.pj-suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  padding: 12px 16px;
  gap: 13px;
  color: #f4f5f7;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  border-bottom: 1px solid #292f38;
  border-radius: 0;
  margin: 0;
  transition: background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
  font-size: 13px;
  line-height: 1.45;
  width: 100%;
  box-sizing: border-box;
}

.pj-suggestion-item:last-child {
  border-bottom: 0;
}

.pj-suggestion-item:hover,
.pj-suggestion-item.is-selected {
  background: linear-gradient(90deg, rgba(217, 119, 87, 0.07), rgba(217, 119, 87, 0.15));
  box-shadow: inset 0 0 0 1px rgba(217, 119, 87, 0.27);
  color: #f4f5f7;
}

.pj-suggestion-item:hover .pj-suggestion-icon,
.pj-suggestion-item.is-selected .pj-suggestion-icon {
  color: #d97757;
}

.pj-suggestion-main {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  flex: 1;
}

.pj-suggestion-icon {
  color: #929ba8;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.pj-suggestion-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.pj-suggestion-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 700;
  color: #f4f5f7;
}

.pj-suggestion-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  color: #8993a0;
  margin-top: 4px;
}

.pj-suggestion-badge {
  font-size: 10px;
  color: #c7cdd5;
  background-color: #222832;
  border: 1px solid #37414d;
  padding: 5px 8px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 0;
}

.pj-suggestion-status {
  padding: 16px;
  text-align: center;
  color: #929ba8;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pj-suggestion-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(217, 119, 87, 0.3);
  border-top-color: #d97757;
  border-radius: 50%;
  animation: pjSpinnerRotate 0.6s linear infinite;
  display: inline-block;
}

@keyframes pjSpinnerRotate {
  to { transform: rotate(360deg); }
}

@media (max-width: 767px) {
  .pj-search-suggestions-container {
    border-radius: 17px;
    max-height: 310px;
  }
  .pj-suggestion-item {
    padding: 10px 12px;
    font-size: 12.5px;
    min-height: 68px;
  }
}

@media (max-width: 600px) {
  .pj-suggestion-badge {
    display: none;
  }
}

/* ==========================================================================
   PromptJo Related Prompts Mobile Carousel & Desktop Grid (V16.8.2.5 Fix)
   - Mobile (< 640px): 1 large vertical card centered, adjacent peeks,
     touch swipe, snap center, width between 260px and 310px (76vw).
   - Desktop (>= 640px): Unchanged multi-column grid (2-col sm, 4-col lg).
   ========================================================================== */

/* Mobile Carousel (< 640px) */
@media (max-width: 639.98px) {
  .pj-related-prompts-carousel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    padding-bottom: 0.75rem !important;
    gap: 1rem !important;
    box-sizing: border-box !important;
    width: calc(100% + 2rem) !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .pj-related-prompts-carousel::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .pj-related-prompt-slide {
    display: block !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    width: 76vw !important;
    min-width: 260px !important;
    max-width: 310px !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    box-sizing: border-box !important;
  }

  .pj-related-prompt-slide [data-prompt-card="true"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 350px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* Desktop Grid (>= 640px) */
@media (min-width: 640px) {
  .pj-related-prompts-carousel {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    gap: 1rem !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    width: 100% !important;
  }

  .pj-related-prompt-slide {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-shrink: 1 !important;
    scroll-snap-align: none !important;
  }

  .pj-related-prompt-slide [data-prompt-card="true"] {
    width: 100% !important;
    max-width: 270px !important;
    min-width: 270px !important;
    height: 350px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 1024px) {
  .pj-related-prompts-carousel {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Fallback Utility Classes for Arbitrary Tailwind Values in Theme */
.w-\[76vw\] {
  width: 76vw;
}
.min-w-\[260px\] {
  min-width: 260px;
}
.max-w-\[310px\] {
  max-width: 310px;
}
.snap-center {
  scroll-snap-align: center;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness, mandatory);
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
  scroll-snap-type: x mandatory;
}
.scroll-smooth {
  scroll-behavior: smooth;
}

@media (min-width: 640px) {
  .sm\:w-auto {
    width: auto;
  }
  .sm\:min-w-0 {
    min-width: 0;
  }
  .sm\:max-w-none {
    max-width: none;
  }
  .sm\:snap-align-none {
    scroll-snap-align: none;
  }
}

/* ==========================================================================
   Single Prompt Mobile Redesign V16.8.2.7 (Strictly 0 - 767px)
   ========================================================================== */
@media (max-width: 767px) {
  details.pj-mobile-accordion[open] .pj-accordion-chevron {
    transform: rotate(180deg) !important;
  }
}

@media (min-width: 768px) {
  details.pj-mobile-accordion > summary {
    cursor: default !important;
    pointer-events: none !important;
  }
  details.pj-mobile-accordion > summary .pj-accordion-chevron {
    display: none !important;
  }
  details.pj-mobile-accordion > summary button {
    pointer-events: auto !important;
  }
}

/* ==========================================================================
   PromptJo Search v2.1.7 UI Specifications
   - Grouped Suggestions (Prompts, Categories, Recent, Popular, Trending)
   - Zero-Query Search History & Clear Action
   - Search Recovery Banner (Did You Mean & Suggestions)
   - Related Queries Strip
   ========================================================================== */

.pj-suggestion-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 17px;
  background-color: #191d24;
  color: #b8c0ca;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid #252b33;
  user-select: none;
}

.pj-suggestion-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pj-suggestion-group-count {
  font-size: 11px;
  font-weight: 500;
  color: #7f8996;
}

.pj-history-clear-btn {
  background: none;
  border: none;
  color: #A8B0C0;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.pj-history-clear-btn:hover {
  color: #D97757;
}

.pj-history-clear-btn[disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.pj-history-delete-item {
  color: #64748B;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  transition: all 0.15s ease;
}

.pj-history-delete-item:hover {
  color: #F87171;
  background-color: rgba(248, 113, 113, 0.12);
}

.pj-history-delete-item[disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Category suggestions are strictly presentation-only in Search v2.1.7 */
.pj-suggestion-item[data-group="categories"],
.pj-suggestion-category-item {
  cursor: default !important;
}

.pj-suggestion-item[data-group="categories"]:hover,
.pj-suggestion-category-item:hover {
  background-color: transparent !important;
  color: #F8FAFC !important;
}

.pj-suggestion-item[data-group="categories"]:hover .pj-suggestion-icon,
.pj-suggestion-category-item:hover .pj-suggestion-icon {
  color: #94A3B8 !important;
}

.pj-trending-chips-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  background-color: #1E232E;
  border-bottom: 1px solid rgba(58, 65, 80, 0.4);
}

.pj-trending-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 9999px;
  background-color: #282D38;
  border: 1px solid rgba(58, 65, 80, 0.8);
  color: #F8FAFC;
  font-size: 11.5px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pj-trending-chip:hover {
  border-color: #D97757;
  color: #D97757;
  background-color: rgba(217, 119, 87, 0.1);
}

/* Recovery Banner */
#pj-search-recovery-container {
  width: 100%;
  margin-bottom: 20px;
  transition: all 0.2s ease;
}

.pj-recovery-box {
  background-color: rgba(40, 45, 56, 0.9);
  border: 1px solid rgba(217, 119, 87, 0.4);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pj-recovery-did-you-mean {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #F8FAFC;
}

.pj-recovery-query-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 8px;
  background-color: rgba(217, 119, 87, 0.18);
  border: 1px solid rgba(217, 119, 87, 0.6);
  color: #F8FAFC;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.pj-recovery-query-chip:hover {
  background-color: #D97757;
  color: #FFFFFF;
}

/* Related Queries Horizontal Strip */
#pj-search-related-strip {
  width: 100%;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

#pj-search-related-strip::-webkit-scrollbar {
  height: 4px;
}
#pj-search-related-strip::-webkit-scrollbar-thumb {
  background: #3A4150;
  border-radius: 4px;
}

.pj-related-label {
  font-size: 12px;
  font-weight: 600;
  color: #A8B0C0;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pj-related-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: 10px;
  background-color: #232833;
  border: 1px solid #3A4150;
  color: #F8FAFC;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.pj-related-chip:hover {
  border-color: #D97757;
  color: #D97757;
  background-color: rgba(217, 119, 87, 0.1);
}

/* =========================================================================
   PROMPTJO THEME V16.9.16 — SEARCH THUMBNAIL & DEMO PREVIEW UI (MOCKUP V2)
   ========================================================================= */

/* Suggestion Thumbnail Trigger in Autocomplete (48px clean square matching mockup v2) */
.pj-thumb-trigger {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 11px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background-color: #242a33;
  border: 1px solid #434c58;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  outline: none;
}

.pj-thumb-trigger:hover,
.pj-thumb-trigger:focus-visible,
.pj-suggestion-item[data-has-preview="true"]:hover .pj-thumb-trigger {
  border-color: #d97757;
  transform: scale(1.03);
  box-shadow: 0 0 12px rgba(217, 119, 87, 0.32);
}

.pj-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pj-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #242a33;
  color: #7f8996;
}

.pj-thumb-placeholder svg {
  width: 19px;
  height: 19px;
}

/* Card Image Error Fallback */
.pj-card-img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #16181F;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #717A8C;
  padding: 16px;
  text-align: center;
  user-select: none;
}

/* Card Preview Trigger */
.pj-thumb-preview-trigger {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background-color: rgba(40, 45, 56, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #F8FAFC;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  outline: none;
}

.pj-thumb-preview-trigger:hover,
.pj-thumb-preview-trigger:focus-visible {
  background-color: #D97757;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(217, 119, 87, 0.4);
}

/* Interactive Preview Floating Portal, Modal & Mobile Full-Screen Viewer */
.pj-search-preview-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(8, 11, 15, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 999998;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.pj-search-preview-backdrop.is-visible {
  opacity: 1;
}

.pj-search-preview-portal {
  position: fixed;
  z-index: 999999;
  width: 370px;
  max-width: calc(100vw - 32px);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
  direction: rtl;
}

.pj-search-preview-portal.is-visible {
  opacity: 1;
  transform: scale(1);
}

.pj-search-preview-portal.is-modal {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(0.96);
  width: 390px;
}

.pj-search-preview-portal.is-modal.is-visible {
  transform: translate(-50%, -50%) scale(1);
}

/* Mobile Immersive Nearly Full-Screen Viewer (Mockup v2 .phone-inner style) */
.pj-search-preview-portal.is-mobile-viewer {
  inset: 12px !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  transform: scale(0.97);
}

.pj-search-preview-portal.is-mobile-viewer.is-visible {
  transform: scale(1);
}

.pj-preview-card {
  background-color: #11151a;
  border: 1px solid #92533f;
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
  position: relative;
  display: flex;
  flex-direction: column;
}

.pj-search-preview-portal.is-mobile-viewer .pj-preview-card {
  width: 100%;
  height: 100%;
  background-color: #11151a;
  border: 1px solid #242c35;
  border-radius: 24px;
  padding: 13px;
  box-sizing: border-box;
}

.pj-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 3px 10px;
  flex: 0 0 auto;
}

.pj-search-preview-portal.is-mobile-viewer .pj-preview-top {
  height: 42px;
  flex: 0 0 42px;
  padding: 0 2px 10px;
}

.pj-preview-kicker {
  font-size: 11px;
  color: #aeb7c2;
  font-weight: 500;
}

.pj-preview-close {
  position: static;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #171b21;
  border: 1px solid #3b444f;
  color: #e9edf2;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  padding: 0;
  flex-shrink: 0;
}

.pj-preview-close:hover,
.pj-preview-close:focus-visible {
  background-color: #d97757;
  border-color: transparent;
  color: #211713;
  outline: none;
}

.pj-preview-media {
  width: 100%;
  height: 280px;
  border-radius: 13px;
  background-color: #090c10;
  overflow: hidden;
  position: relative;
  border: 1px solid #29313b;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .pj-preview-media {
    height: 304px;
  }
}

.pj-preview-media.is-navigable {
  cursor: pointer;
}

.pj-search-preview-portal.is-mobile-viewer .pj-preview-media {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  border-radius: 14px;
  background-color: #080b0f;
}

.pj-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  display: block;
}

.pj-preview-video-host {
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: #080b0f;
}

.pj-preview-video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  background-color: #080b0f;
  outline: none;
}

.pj-preview-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 20px;
  background: rgba(11, 14, 18, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  outline: none;
}

.pj-preview-play-btn:hover,
.pj-preview-play-btn:focus-visible {
  background: rgba(17, 21, 26, 0.9);
  border-color: rgba(217, 119, 87, 0.7);
}

.pj-preview-play-circle {
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  background-color: #d97757;
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(217, 119, 87, 0.42);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.pj-preview-play-btn:hover .pj-preview-play-circle,
.pj-preview-play-btn:focus-visible .pj-preview-play-circle {
  transform: scale(1.06);
  background-color: #e58a6d;
}

.pj-preview-play-circle svg {
  width: 20px;
  height: 20px;
  margin-left: 2px;
}

.pj-preview-play-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  background-color: rgba(24, 27, 32, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11px;
  font-weight: 700;
  color: #f4f5f7;
}

.pj-preview-duration {
  color: #e39a80;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pj-preview-loading {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 15;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background-color: rgba(15, 17, 21, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pj-preview-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(217, 119, 87, 0.25);
  border-top-color: #d97757;
  border-radius: 9999px;
  animation: pjSpinnerRotate 0.65s linear infinite;
}

.pj-preview-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #7f8996;
  font-size: 12px;
  text-align: center;
}

.pj-preview-fallback svg {
  width: 32px;
  height: 32px;
  opacity: 0.6;
}

.pj-preview-footer {
  margin-top: 0;
  padding: 13px 4px 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  direction: rtl;
}

.pj-search-preview-portal.is-mobile-viewer .pj-preview-footer {
  padding: 14px 3px 3px;
}

.pj-preview-title {
  font-size: 13px;
  font-weight: 700;
  color: #f4f5f7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.pj-preview-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pj-preview-open-link {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  color: #f4f5f7;
  background-color: #1c222b;
  border: 1px solid #37414d;
  border-radius: 8px;
  padding: 5px 9px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.pj-preview-open-link:hover,
.pj-preview-open-link:focus-visible {
  border-color: #d97757;
  color: #e39a80;
  background-color: #241c19;
  outline: none;
}

.pj-preview-open-link.hidden {
  display: none !important;
}

.pj-preview-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  color: #e39a80;
  background-color: #2a1d19;
  border: 1px solid #754634;
  border-radius: 8px;
  padding: 5px 9px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .pj-search-preview-portal,
  .pj-search-preview-backdrop,
  .pj-thumb-trigger,
  .pj-thumb-preview-trigger,
  .pj-preview-play-circle {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}