/* ============================================================================
   ARTURUM RESPONSIVE OVERRIDES
   Load AFTER styles.css — all mobile fixes inside @media blocks
   NEVER edit styles.css for responsive changes
   ============================================================================ */

/* === GLOBAL MOBILE RESETS === */
@media (max-width: 768px) {
  :root {
    --mobile-padding: 16px;
    --touch-target-min: 44px;
  }

  body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  * {
    -webkit-tap-highlight-color: transparent;
  }

  button,
  a,
  [role="button"] {
    touch-action: manipulation;
  }

  /* Prevent iOS zoom on input focus */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}


/* ============================================================================
   NAVBAR — Clean mobile layout for logged-out users
   Desktop: full nav with search, credits, create button — untouched
   Mobile logged-out: only logo + login button + hamburger
   ============================================================================ */

@media (max-width: 768px) {
  /* Hide credits button on mobile — credits accessible via hamburger menu */
  #header-credits-btn {
    display: none !important;
  }

  /* Notification panel — full width on mobile */
  #notification-panel-wrapper {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }
  #notification-panel {
    width: 100% !important;
  }
}


/* ============================================================================
   CAROUSELS — Enable touch scrolling on mobile
   Desktop: overflow:hidden + arrow buttons (styles.css:613-615)
   Mobile ≤640px: arrows hidden (styles.css:664), so enable touch scroll
   ============================================================================ */

@media (max-width: 640px) {
  .carousel-container {
    overflow-x: auto !important;
    pointer-events: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 16px;
    padding-right: 16px;
  }

  .carousel-container::-webkit-scrollbar {
    display: none;
  }

  .carousel-item {
    scroll-snap-align: start;
  }

  /* Thumbnail sizing — show ~1.2 cards to hint at scrolling (carousel only) */
  .carousel-container .thumbnail-container {
    width: calc(100vw - 64px) !important;
    min-width: calc(100vw - 64px) !important;
  }

  /* Fade gradient on right edge — signals swipeable content */
  .carousel-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    background: linear-gradient(to right, transparent, rgba(5, 5, 5, 0.85));
    pointer-events: none;
    z-index: 10;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  .carousel-container {
    overflow-x: auto !important;
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .carousel-container::-webkit-scrollbar {
    display: none;
  }
}

/* Remove hover scale on touch — it sticks on mobile */
@media (hover: none) {
  .thumbnail-container:hover {
    transform: none !important;
    z-index: auto !important;
  }

  .thumbnail-container:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}


/* ============================================================================
   FOOTER — Stack vertically on mobile
   Desktop: inline styles (display:flex; gap:80px) — untouched
   Mobile: override with !important inside media query
   ============================================================================ */

@media (max-width: 768px) {
  /* Columns wrapper (has inline: display:flex; gap:80px) */
  #footer > div > div:first-child {
    flex-direction: column !important;
    gap: 28px !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Outer container (has inline: padding: 48px 32px 32px) */
  #footer > div {
    padding: 32px 16px 24px !important;
  }

  /* Bottom bar (has inline: display:flex; justify-content:space-between) */
  #footer > div > div:last-child {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
  }

  /* Touch targets for footer links */
  #footer a.flink {
    padding: 6px 0;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  /* Larger social icon tap targets */
  #footer a.fsocial {
    padding: 10px !important;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  #footer > div > div:first-child {
    gap: 40px !important;
  }
}


/* ============================================================================
   HERO — Mobile optimization
   Desktop: h-[90vh], side-by-side CTA buttons — untouched
   Mobile: shorter height, stacked buttons, clamped title
   ============================================================================ */

@media (max-width: 768px) {
  #hero-section {
    height: 85vh !important;
    height: 85dvh !important;
  }

  /* Push hero content down so it doesn't crowd the navbar */
  #hero-content {
    padding-bottom: 3rem !important;
  }

  /* CTA buttons — stack vertically */
  #hero-section .flex.gap-4 {
    flex-direction: column;
    gap: 12px;
  }

  #hero-section .flex.gap-4 > a {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  #hero-section {
    height: 80vh !important;
    height: 80dvh !important;
  }

  /* Slightly smaller hero text on very small phones */
  #hero-section h1 {
    font-size: clamp(28px, 9vw, 48px) !important;
  }

}


/* ============================================================================
   PROJECT PAGE — Mobile optimization
   Desktop: two-column layout (main + sidebar) — untouched
   Mobile: remove excess padding, fix media slider, fund button, video controls
   ============================================================================ */

/* --- Mobile section reordering ---
   Desktop: two-column (main-content | sidebar) via lg:flex-row — untouched
   Mobile: single column. Flatten both containers so sections can be reordered.
   Moves Discussion (comments) to the very end, after sidebar content. */
@media (max-width: 1023px) {
  #main-content {
    display: contents !important;
  }
  /* Flatten the .space-y-8 wrapper inside main-content so all sections
     become direct flex children and can be reordered */
  #main-content > .space-y-8 {
    display: contents !important;
  }
  #sidebar {
    display: contents !important;
  }
  #sidebar > div {
    display: contents !important;
  }

  /* Push discussion section after all sidebar content */
  #discussion-section {
    order: 99 !important;
  }
}

@media (max-width: 768px) {
  /* Remove excess left/right padding on main content + sidebar */
  #main-content {
    padding-left: 0 !important;
  }
  #sidebar > div {
    padding-right: 0 !important;
  }

  /* Project title — scale down from text-4xl (36px) */
  #projectTitle {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  /* Fund button — remove min-width that causes overflow on small screens */
  .invest-earn-btn-lg {
    min-width: 0 !important;
    padding: 16px 20px !important;
    font-size: 18px !important;
  }

  /* Video controls — always visible on touch (no hover) */
  #hero-video-container .group-hover\:opacity-100 {
    opacity: 1 !important;
  }
  #hero-video-container .group-hover\:pointer-events-auto {
    pointer-events: auto !important;
  }

  /* Video control touch targets — bigger for fingers */
  #hero-video-container button {
    min-width: 44px;
    min-height: 44px;
  }

  /* Volume slider — HIDE on mobile to prevent overlap with play button.
     User taps volume icon to mute/unmute instead. */
  .group\/vol .w-0 {
    display: none !important;
  }

  /* Play/Pause button — make static instead of absolute so it flows
     between volume icon and duration without overlap */
  #hero-video-container .absolute.left-1\/2.top-1\/2 {
    position: static !important;
    transform: none !important;
    flex: 1;
    display: flex;
    justify-content: center;
  }

  /* Owner controls — show three-dots, hide Upload/Remix by default on mobile */
  #hero-owner-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  #hero-owner-controls .hero-mobile-dots {
    display: flex !important;
  }
  #hero-owner-controls .hero-owner-btn {
    display: none !important;
  }
  /* When expanded via three-dots tap, show the buttons */
  #hero-owner-controls.mobile-expanded .hero-owner-btn {
    display: flex !important;
  }

  /* Media slider items — full width on mobile (1 per view) */
  [id^="media-slider-"] > div {
    width: calc(100vw - 64px) !important;
    min-width: calc(100vw - 64px) !important;
  }

  /* Media slider — enable touch scroll + hide scrollbar */
  [id^="media-slider-"] {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 4px;
  }
  [id^="media-slider-"]::-webkit-scrollbar {
    display: none;
  }
  [id^="media-slider-"] > div {
    scroll-snap-align: start;
  }

  /* Media slider chevron buttons — hide on mobile (touch scroll instead) */
  #ai-content-section .flex.items-center.gap-2.ml-4 {
    display: none !important;
  }

  /* Share button — ensure it's tappable */
  #total-raised-widget button {
    min-height: 44px;
    padding: 10px 16px !important;
  }

  /* Comment textarea — comfortable mobile input */
  #discussion-section textarea {
    min-height: 80px;
  }
}

/* Media slider — 2 columns on tablet */
@media (min-width: 641px) and (max-width: 1023px) {
  [id^="media-slider-"] > div {
    width: calc(50% - 8px) !important;
    min-width: calc(50% - 8px) !important;
  }
}

/* Remove hover effects on video controls for touch devices */
@media (hover: none) {
  .invest-earn-btn:hover {
    transform: none !important;
  }
  .invest-earn-btn:active {
    transform: scale(0.98) !important;
  }
  .invest-earn-btn:hover .btn-icon,
  .invest-earn-btn:hover .btn-text-wrapper {
    transform: none !important;
  }
}


/* ============================================================================
   ASSETS MODAL — Full-screen bottom sheet on mobile
   Desktop: centered max-w-6xl with rounded corners — untouched
   Mobile: full screen, bottom-sheet style, optimized touch targets
   ============================================================================ */

@media (max-width: 768px) {
  /* Modal overlay — align to bottom for sheet feel */
  #assets-modal {
    align-items: flex-end !important;
  }

  /* Modal panel — full width, almost full height, bottom-sheet radius */
  #assets-modal > div {
    max-width: 100% !important;
    max-height: 95vh !important;
    max-height: 95dvh !important;
    border-radius: 20px 20px 0 0 !important;
    border: none !important;
  }

  /* Drag handle hint at top */
  #assets-modal > div::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 8px auto 0;
    flex-shrink: 0;
  }

  /* Header — compact padding on mobile */
  #assets-modal > div > div:first-child {
    padding: 12px 16px !important;
  }

  /* Title — smaller on mobile */
  #assets-modal h2 {
    font-size: 1.125rem !important;
  }
  /* Hide subtitle on mobile to save space */
  #assets-modal h2 + p {
    display: none !important;
  }
  /* Hide large icon on mobile */
  #assets-modal .text-3xl.text-primary {
    display: none !important;
  }

  /* Close button — bigger touch target */
  #assets-modal button[onclick*="close"] {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Tab/filter buttons — scrollable row */
  #assets-tabs {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #assets-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Filter bar — stack vertically when owner (filters + Add Media) */
  #assets-filter-bar > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }
  /* Filter buttons container — swipeable horizontal scroll */
  #assets-filter-bar > div > div:first-child {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
  }
  #assets-filter-bar > div > div:first-child::-webkit-scrollbar {
    display: none;
  }
  /* Each filter button — prevent shrinking so they scroll */
  #assets-filter-bar > div > div:first-child > button,
  #assets-filter-bar [data-media-filter] {
    flex-shrink: 0 !important;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  /* Body — reduced padding */
  #assets-body {
    padding: 12px !important;
  }

  /* Media grid — single column for bigger previews */
  #media-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Footer — hide "Press ESC" on mobile, compact padding */
  #assets-footer {
    padding: 10px 16px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #assets-footer span:last-child {
    display: none !important;
  }

  /* === LIGHTBOX — Full-screen on mobile === */

  /* Nav arrows — smaller and closer to edges */
  #assets-lightbox button[onclick*="prevLightboxItem"],
  #assets-lightbox button[onclick*="nextLightboxItem"] {
    padding: 8px !important;
  }
  #assets-lightbox button[onclick*="prevLightboxItem"] {
    left: 4px !important;
  }
  #assets-lightbox button[onclick*="nextLightboxItem"] {
    right: 4px !important;
  }
  #assets-lightbox button[onclick*="LightboxItem"] .material-symbols-outlined {
    font-size: 28px !important;
  }

  /* Close button — bigger touch target */
  #assets-lightbox .lightbox-close {
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 8px !important;
    right: 8px !important;
  }

  /* Content — use full viewport */
  #assets-lightbox .max-w-\[90vw\] {
    max-width: 100vw !important;
    padding: 0 4px;
  }
  #assets-lightbox video,
  #assets-lightbox img {
    max-height: 75vh !important;
    max-height: 75dvh !important;
    border-radius: 0 !important;
  }
}


/* ============================================================================
   SHARE MODAL — Bottom sheet on mobile
   Desktop: centered max-w-md — untouched
   Mobile: full width, bottom-sheet style, bigger touch targets
   ============================================================================ */

@media (max-width: 768px) {
  /* Modal overlay — align to bottom for sheet feel */
  #share-modal {
    align-items: flex-end !important;
  }

  /* Modal panel — full width, bottom-sheet radius */
  #share-modal > div:last-child {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Drag handle hint at top */
  #share-modal > div:last-child::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 8px auto 0;
  }

  /* Header — compact padding */
  #share-modal > div:last-child > div:first-child {
    padding: 12px 16px !important;
  }

  /* Close button — bigger touch target (was w-8 h-8) */
  #share-modal button[class*="w-8"][class*="h-8"] {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* Content area — reduce padding */
  #share-modal > div:last-child > div:last-child {
    padding: 16px !important;
  }

  /* QR code — slightly smaller on small phones */
  #share-qr-code {
    width: 160px !important;
    height: 160px !important;
  }

  /* URL input row — comfortable touch height */
  #share-url-input {
    min-height: 44px;
  }

  /* Copy button — bigger touch target */
  #copy-url-btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* Social buttons — ensure good spacing and touch targets */
  #share-modal .flex.justify-center.gap-4 {
    gap: 16px !important;
  }
  #share-modal .flex.justify-center.gap-4 > button {
    min-width: 48px !important;
    min-height: 48px !important;
  }
}

@media (max-width: 480px) {
  /* Even smaller QR on tiny phones */
  #share-qr-code {
    width: 140px !important;
    height: 140px !important;
  }
}

/* Remove hover lift on social buttons for touch devices */
@media (hover: none) {
  #share-modal .flex.justify-center.gap-4 > button:hover {
    transform: none !important;
  }
  #share-modal .flex.justify-center.gap-4 > button:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease;
  }
}


/* ============================================================================
   FUND MODAL — Bottom sheet on mobile
   Desktop: centered max-w-lg with p-8 — untouched
   Mobile: full width, compact padding, full-width buttons, better slider
   ============================================================================ */

@media (max-width: 768px) {
  /* Modal overlay — align to bottom for sheet feel */
  #fund-modal {
    align-items: flex-end !important;
  }

  /* Modal panel — full width, bottom-sheet radius */
  #fund-modal > div {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
  }

  /* Inner wrapper — reduce padding from p-8 to p-5 */
  #fund-modal > div > div.relative {
    padding: 20px !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Drag handle hint at top */
  #fund-modal > div::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 8px auto 0;
  }

  /* Close button — bigger touch target */
  #fund-modal button.absolute.top-4.right-4 {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Title — slightly smaller on mobile */
  #fund-body h2 {
    font-size: 1.5rem !important;
  }

  /* Range slider — thicker for easier touch dragging */
  #amount-slider {
    height: 8px !important;
    cursor: pointer;
  }

  /* Slider thumb — bigger for touch */
  #amount-slider::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }
  #amount-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }

  /* Elite tier unlock section — compact padding */
  #elite-tier-unlock > div {
    padding: 12px !important;
  }

  /* Custom amount input — comfortable touch height */
  #custom-amount-input {
    min-height: 44px;
  }

  /* Confirm/close button — full width on mobile */
  #fund-body .pt-4.flex.justify-center > button {
    width: 100% !important;
  }

  /* Tier feedback — compact */
  #tier-feedback {
    padding: 12px !important;
  }
}

@media (max-width: 480px) {
  /* Amount display — still readable but not oversized */
  #fund-body .text-3xl {
    font-size: 1.5rem !important;
  }

  /* Success view — reduce large icon and heading */
  #fund-body .text-6xl {
    font-size: 3rem !important;
  }
  #fund-body .text-3xl.font-bold {
    font-size: 1.5rem !important;
  }
}


/* ============================================================================
   EXPLORE PAGE — Swipeable filter pills + grid optimization
   Desktop: wrapped filter pills, 5-col grid — untouched
   Mobile: single-row horizontal scroll filters, tighter grid
   ============================================================================ */

@media (max-width: 768px) {
  /* Page container — reduce top padding */
  .explore-page {
    padding-top: 16px !important;
  }

  /* Filter pills — single row, horizontal scroll */
  .explore-page > .mb-8.flex {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px !important;
    margin-bottom: 16px !important;
    padding-bottom: 4px;
  }
  .explore-page > .mb-8.flex::-webkit-scrollbar {
    display: none;
  }

  /* Filter buttons + wrappers — prevent shrinking for scroll */
  .explore-page > .mb-8.flex > div,
  .explore-page > .mb-8.flex > button {
    flex-shrink: 0 !important;
  }

  /* Sort button — remove ml-auto so it flows inline, not pushed far right */
  .explore-page > .mb-8.flex > .ml-auto {
    margin-left: 0 !important;
  }

  /* Filter dropdowns — full-width overlay on mobile (avoids scroll clipping) */
  .explore-page .filter-dropdown {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    width: auto !important;
    min-width: 0 !important;
    border-radius: 12px !important;
    max-height: 60vh;
    overflow-y: auto;
  }

  /* Filter dropdown options — bigger touch targets */
  .explore-page .filter-option {
    padding: 12px 16px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Projects grid — single column on mobile for bigger thumbnails */
  #projects-grid {
    gap: 24px !important;
  }
  #projects-grid .grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Section headings */
  #projects-grid h2 {
    font-size: 1.125rem !important;
  }

  /* View all button — comfortable touch target */
  #view-all-my-projects {
    min-height: 44px;
    padding: 10px 16px !important;
  }
}


/* ============================================================================
   LEARN PAGE — Mobile optimization
   Desktop: py-16, side-by-side stats + progress, multi-col grids — untouched
   Mobile: compact padding, stacked hero stats, single-col quest cards
   ============================================================================ */

@media (max-width: 768px) {
  /* Page container — reduce vertical padding & section spacing */
  #learn-page > div {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  #learn-page > div > div {
    gap: 40px !important;
  }

  /* Hero title */
  #learn-page h1 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  /* Hero progress bar container — reduce padding */
  #learn-page .bg-gray-800\/30 {
    padding: 12px !important;
  }

  /* Hero stats + progress row — stack vertically */
  #learn-page .bg-gray-800\/30 > div {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Stats row — stack each stat on its own row, centered */
  #learn-page .bg-gray-800\/30 > div > .flex.items-center.gap-6 {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100%;
  }

  /* Hide stat dividers on mobile */
  #learn-page .bg-gray-800\/30 .w-px {
    display: none !important;
  }

  /* Progress bar section — full width */
  #learn-page .bg-gray-800\/30 .w-48 {
    width: 100% !important;
    flex: 1;
  }
  #learn-page .bg-gray-800\/30 > div > .flex.items-center.gap-4 {
    width: 100%;
  }

  /* Section headers — smaller, stack if needed */
  #learn-page section > .flex > h2,
  #learn-page h2 {
    font-size: 1.25rem !important;
  }
  /* "X Quests Available" badge — allow wrapping below title */
  #learn-page section > .flex.items-center.gap-4 {
    flex-wrap: wrap;
  }
  #learn-page section > .flex.items-center.gap-4 > .ml-auto {
    margin-left: 0 !important;
  }

  /* Quest cards grid — single column */
  #learn-page .grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Quest card padding — slightly compact */
  #learn-page .quest-card {
    padding: 16px !important;
  }

  /* Side quest modules — reduce gap between text and video */
  #learn-page .module-section {
    gap: 24px !important;
  }

  /* Side quest CTA — stack button and badge vertically */
  #learn-page .module-section .mt-6.flex {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Side quest CTA button — full width */
  #learn-page .module-section .mt-6.flex > button {
    width: 100%;
    justify-content: center;
  }

  /* Side quest headings */
  #learn-page .module-section h3 {
    font-size: 1.25rem !important;
  }
  #learn-page .module-section h4 {
    font-size: 1rem !important;
  }

  /* Hall of Fame heading icon — smaller */
  #learn-page .text-4xl.text-primary {
    font-size: 1.75rem !important;
  }
}


/* ============================================================================
   SAFE AREA INSETS (iPhone notch / home indicator)
   ============================================================================ */

@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    #footer {
      padding-bottom: env(safe-area-inset-bottom);
    }

    #toasts {
      top: calc(80px + env(safe-area-inset-top));
    }
  }
}


/* ============================================================================
   PROFILE PAGE (ProfilePage.js — #profile)
   ============================================================================ */

@media (max-width: 1023px) {
  /* Stack sidebar above content on mobile/tablet */
  #profile .flex.flex-col.lg\:flex-row {
    flex-direction: column !important;
  }

  /* Sidebar: full width, not fixed */
  #profile .lg\:w-\[280px\] {
    width: 100% !important;
  }
  #profile .lg\:fixed {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    padding-top: 16px !important;
  }
}

@media (max-width: 768px) {
  /* Reduce outer padding */
  #profile > .flex {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Media title + filter row — stack vertically */
  #profile .flex.items-center.justify-between.mb-4 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Category filter buttons — swipeable single row */
  #profile .flex.items-center.justify-between.mb-4 > .flex.gap-2 {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  #profile .flex.items-center.justify-between.mb-4 > .flex.gap-2::-webkit-scrollbar {
    display: none;
  }
  #profile .profile-filter-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 6px 12px !important;
    font-size: 0.8125rem !important;
  }

  /* Media gallery grid — 2 columns on mobile */
  #profile-media-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
  }

  /* Right content area — remove top padding (sidebar is above now) */
  #profile .flex-1.min-w-0.pt-16 {
    padding-top: 8px !important;
  }

  /* ---- LIGHTBOX: full-screen scrollable layout on mobile ---- */

  /* Make outer wrapper a scrollable column */
  #media-lightbox > .h-full.flex {
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Media area: no flex-1, shrink to content, let it scroll */
  #media-lightbox > .h-full.flex > .flex-1.flex.items-center.justify-center {
    flex: none !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 48px 12px 12px !important;
  }

  /* Media container: no height cap — let content size naturally */
  #lightbox-media-container {
    max-height: none !important;
    height: auto !important;
  }
  #lightbox-media-container img {
    max-height: 60vh !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain;
  }
  #lightbox-media-container video {
    max-height: 70vh !important;
    width: 100% !important;
    max-width: 100% !important;
    object-fit: contain;
  }

  /* Sidebar: full-width below media, grows to fit content */
  #media-lightbox .w-96 {
    width: 100% !important;
    height: auto !important;
    flex: none !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  /* Comments section: show all comments, let outer container scroll */
  #media-lightbox .w-96 > .flex-1.overflow-y-auto {
    overflow-y: visible !important;
    flex: none !important;
    max-height: none !important;
  }

  /* Comment input: sticky at bottom of viewport */
  #media-lightbox .w-96 > .p-4.border-t {
    position: sticky;
    bottom: 0;
    background: #111 !important;
    z-index: 5;
  }

  /* Close button: stay top-right, above scroll */
  #media-lightbox > .h-full.flex > button[onclick="closeLightbox()"],
  #media-lightbox button[onclick="closeLightbox()"] {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 20 !important;
  }

  /* Hide desktop prev/next arrow buttons on mobile — replaced by mini arrows + swipe */
  #media-lightbox > .h-full.flex > button[onclick="navigateLightbox(-1)"],
  #media-lightbox > .h-full.flex > button[onclick="navigateLightbox(1)"] {
    display: none !important;
  }

  /* Media area — relative for arrow positioning */
  #media-lightbox > .h-full.flex > .flex-1.flex.items-center.justify-center {
    position: relative;
  }

  /* Mini mobile nav arrows on the media card */
  .lightbox-mobile-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, opacity 0.15s;
  }
  .lightbox-mobile-arrow:active {
    background: rgba(255,255,255,0.15);
  }
  .lightbox-mobile-arrow.prev {
    left: 6px;
  }
  .lightbox-mobile-arrow.next {
    right: 6px;
  }
  .lightbox-mobile-arrow .material-symbols-outlined {
    font-size: 18px !important;
  }

  /* Smooth swipe transitions on the whole lightbox card */
  #media-lightbox > .h-full.flex {
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.3s ease-out;
  }
}

@media (max-width: 480px) {
  /* Very small phones — single column media grid */
  #profile-media-gallery {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================================
   SCENE VIEWER (V3) — /project/:id/scenes
   ============================================================================ */

@media (min-width: 769px) and (max-width: 1023px) {
  /* Tablet: allow scrolling instead of fixed viewport height */
  main.flex-1.overflow-hidden > .flex.flex-1.bg-background-dark {
    height: auto !important;
    min-height: calc(100vh - 3.5rem);
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Video container: reasonable tablet height */
  #video-container {
    height: 45vw !important;
    min-height: 200px;
    max-height: 300px;
  }

  /* Sidebar: full width below timeline */
  main.flex-1.overflow-hidden aside {
    width: 100% !important;
  }
}

@media (max-width: 768px) {

  /* --- Studio container: horizontal scroll-snap between editor & sidebar --- */
  [data-page="studio"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    height: calc(100vh - 56px) !important;
    height: calc(100dvh - 56px) !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  [data-page="studio"]::-webkit-scrollbar {
    display: none;
  }

  /* --- Left panel (Video + Timeline) — full viewport width --- */
  [data-page="studio"] > div:first-child {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    flex: none !important;
    scroll-snap-align: start;
    height: 100% !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    position: relative;
    padding: 4px 4px 0 4px !important;
    gap: 4px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Gradient hint on right edge — signals swipeable content */
  [data-page="studio"] > div:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, rgba(5, 5, 5, 0.6));
    pointer-events: none;
    z-index: 5;
    opacity: 0.5;
  }

  /* --- Right panel (Sidebar) — full viewport width --- */
  [data-page="studio"] > aside {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    flex: none !important;
    scroll-snap-align: start;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* --- Panel indicator (fixed bottom-left) --- */
  .studio-panel-indicator {
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    display: flex;
    gap: 8px;
    z-index: 50;
    background: rgba(20, 20, 20, 0.88);
    padding: 6px 14px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(234, 40, 49, 0.15);
  }

  /* Video container — flex-grow to fill available space above timeline */
  #video-container {
    height: auto !important;
    min-height: 120px !important;
    max-height: none !important;
    flex: 1 1 0% !important;
    flex-shrink: 1 !important;
  }

  /* Video controls — touch-friendly sizing */
  #video-controls button {
    min-width: 36px;
    min-height: 36px;
  }

  /* Hide quality/settings gear icon on mobile */
  #quality-btn-wrap {
    display: none !important;
  }

  /* Share button — top-right, just below Export button (moved to video-container via JS) */
  #share-btn-wrap {
    position: absolute !important;
    top: 44px !important;
    right: 8px !important;
    bottom: auto !important;
    z-index: 20;
  }
  #share-btn-wrap > button {
    width: 36px !important;
    height: 36px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
  }
  #share-btn-wrap > button .material-symbols-outlined {
    font-size: 20px !important;
  }
  /* Share menu — open downward from top-right */
  #share-menu {
    bottom: auto !important;
    top: 100% !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    right: 0 !important;
  }

  /* Export button — hide in timeline header before JS moves it to video container */
  #timeline-controls > #export-video-btn {
    display: none !important;
  }
  /* Export button — top-right corner of video (moved to video-container via JS) */
  #video-container > #export-video-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 20;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
    color: white !important;
  }

  /* ---- Video: hide secondary icons during playback ---- */
  #video-container[data-playing="true"] #studio-nav-buttons,
  #video-container[data-playing="true"] #share-btn-wrap,
  #video-container[data-playing="true"] > #export-video-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
  }
  /* Ensure they fade in smoothly when paused */
  #studio-nav-buttons,
  #share-btn-wrap,
  #video-container > #export-video-btn {
    transition: opacity 0.3s ease !important;
  }

  /* ---- TIMELINE SECTION ---- */

  /* Timeline section wrapper — don't shrink, fill bottom */
  #video-container ~ .flex.gap-2,
  [data-page="studio"] > div:first-child > .flex.gap-2 {
    flex-shrink: 0 !important;
    gap: 2px !important;
  }

  /* Timeline canvas: handles its own touch events */
  #timeline-canvas {
    touch-action: none !important;
  }

  /* Full View mode: ensure timeline fits on mobile */
  #timeline-container {
    max-height: 240px !important;
    overflow: visible !important;
  }

  /* Timeline add buttons — overlay on top of timeline (CONTENT_RIGHT=0) */
  #add-scene-btn,
  #add-music-btn,
  #add-voice-btn {
    right: 2px !important;
    width: 22px !important;
    height: 28px !important;
    background: rgba(20, 20, 20, 0.55) !important;
    backdrop-filter: blur(6px) !important;
    border-width: 1px !important;
  }

  /* Timeline header — hide "Timeline" title + hint text via CSS (prevents flash on load) */
  #timeline-header > div:first-child {
    display: none !important;
  }
  #timeline-header {
    justify-content: center !important;
    gap: 2px !important;
    margin-bottom: 2px !important;
  }

  /* Controls row: all controls in one line */
  #timeline-controls {
    flex-wrap: nowrap !important;
    gap: 3px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* Zoom % display — compact on mobile */
  #zoom-level-display {
    font-size: 0.65rem !important;
    min-width: 28px !important;
    padding: 0 !important;
  }

  /* View mode toggle — compact (keep font-size only, padding set in HTML) */
  #simple-mode-btn,
  #full-mode-btn {
    font-size: 0.7rem !important;
  }

  /* Timeline track labels — scrollable with timeline content on mobile.
     JS positions them via inline transform; hide until JS takes over. */
  #scene-label,
  #music-label,
  #voice-label {
    left: 0 !important;
    top: 0 !important;
    opacity: 0;
    will-change: transform;
    transition: none !important;
    gap: 2px !important;
    flex-direction: row !important;
    align-items: center !important;
    pointer-events: auto !important;
    padding: 2px 4px 2px 8px !important;
    border-radius: 8px;
    background: rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(6px);
    white-space: nowrap;
  }
  #scene-label > span:first-child,
  #music-label > span:first-child,
  #voice-label > span:first-child {
    font-size: 10px !important;
    width: auto !important;
    margin: 0 !important;
  }
  #scene-label .volume-icon,
  #music-label .volume-icon,
  #voice-label .volume-icon {
    font-size: 22px !important;
    margin: 0 !important;
    pointer-events: auto !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px;
    -webkit-tap-highlight-color: rgba(147, 51, 234, 0.3);
  }
  /* Volume inline slider — bigger for touch on mobile */
  .volume-slider-inline {
    width: 28px !important;
    height: 80px !important;
    gap: 4px !important;
    margin-top: 0 !important;
  }
  .volume-slider-inline .volume-slider-track {
    width: 22px !important;
    height: 60px !important;
    border-radius: 6px !important;
  }
  .volume-slider-inline .volume-fill {
    border-radius: 6px !important;
  }
  .volume-slider-inline .volume-percent {
    font-size: 10px !important;
  }

  /* ---- RIGHT SIDEBAR (now below) ---- */

  /* Sidebar inner padding */
  main.flex-1.overflow-hidden aside > div {
    padding: 12px !important;
  }

  /* Action buttons row — wrap if needed */
  main.flex-1.overflow-hidden aside .flex.gap-2.mb-3 {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  main.flex-1.overflow-hidden aside .invest-earn-btn {
    flex: 1 1 100% !important;
  }
  main.flex-1.overflow-hidden aside .flex.gap-2.mb-3 > a,
  main.flex-1.overflow-hidden aside .flex.gap-2.mb-3 > button:not(.invest-earn-btn) {
    flex: 1 1 45% !important;
  }

  /* Variant type tabs — full width */
  main.flex-1.overflow-hidden aside .flex.gap-2.p-1\.5 button {
    font-size: 0.75rem !important;
    padding: 6px 8px !important;
  }

  /* Variants container — fill available sidebar height */
  #variants-container {
    max-height: none !important;
  }

  /* ---- VARIANTS MODAL ---- */

  /* Modal container — full screen on mobile */
  #variants-modal > .absolute ~ .relative {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
  }

  /* Modal header — stack, scrollable sort filters */
  #variants-modal .flex.items-center.justify-between.px-4.py-3 {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  /* Sort filters — horizontal scroll */
  #variants-modal .flex.items-center.gap-2:has(.filter-btn) {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  #variants-modal .flex.items-center.gap-2:has(.filter-btn)::-webkit-scrollbar {
    display: none;
  }
  #variants-modal .filter-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
  }

  /* Sort label */
  #variants-modal .flex.items-center.gap-2 > span.text-xs.text-gray-400 {
    display: none !important;
  }

  /* Hide help button on mobile */
  #shortcuts-help-btn {
    display: none !important;
  }

  /* Modal grid — single column */
  #modal-variants-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  /* Modal content area — less padding */
  #variants-modal .flex-1.overflow-y-auto.p-6 {
    padding: 10px !important;
  }

  /* Pagination footer — stack */
  #variants-modal .flex.items-center.justify-between.px-6.py-4 {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  /* Hide "Go to" quick jump on mobile */
  #variants-modal .flex.items-center.gap-2:has(#jump-page-input) {
    display: none !important;
  }

  /* Scene navigation dots — wrap if many scenes */
  #vote-modal-scene-dots {
    flex-wrap: wrap !important;
    max-width: 120px;
  }
}


/* ============================================================================
   CREDITS / PRICING MODAL
   ============================================================================ */

@media (max-width: 768px) {
  /* Full-width bottom-sheet style on mobile */
  #credits-modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  #credits-modal-content {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: none !important;
  }

  /* Tighter header padding */
  #credits-modal-content > .sticky {
    padding: 16px !important;
  }

  /* Center tab buttons (Subscriptions / Credit Packs) */
  #credits-modal-content > .px-6.pt-4 > .flex.gap-2 {
    justify-content: center !important;
  }

  /* Stack the billing toggle below description text */
  #credits-content-subscription > .flex.items-center.justify-between {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Center the monthly/yearly toggle pill */
  #credits-content-subscription > .flex.items-center.justify-between > .flex.items-center.gap-2 {
    align-self: center;
  }

  /* Reduce subscription section padding */
  #credits-content-subscription {
    padding: 16px !important;
  }

  /* Reduce packs section padding */
  #credits-content-packs {
    padding: 16px !important;
  }

  /* Subscription plan cards — centered and tighter on mobile */
  #subscription-plans-grid {
    gap: 12px !important;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  #subscription-plans-grid > div {
    padding: 14px 12px !important;
  }

  /* Center the description text */
  #credits-content-subscription > .flex.items-center.justify-between > p {
    text-align: center;
  }

  /* Credit packs — centered */
  #credits-content-packs > .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Center the packs description text */
  #credits-content-packs > p {
    text-align: center;
  }

  /* Tab bar padding */
  #credits-modal-content > .px-6.pt-4 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Alert/balance banner padding */
  #credits-modal-content > .px-6.py-4 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 380px) {
  /* Single column credit packs on very small phones */
  #credits-content-packs > .grid {
    grid-template-columns: 1fr !important;
  }

  /* Smaller price text */
  #subscription-plans-grid .text-3xl {
    font-size: 1.5rem !important;
  }
}


/* ============================================================================
   CREATE PAGE — Two-panel swipeable layout on mobile
   Desktop: 360px sidebar + flex-1 right panel — untouched
   Mobile: full-width panels with horizontal scroll-snap swipe
   ============================================================================ */

@media (max-width: 768px) {
  /* Outer flex container — horizontal scroll-snap paging */
  [data-page="create"] > .flex.flex-row {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  [data-page="create"] > .flex.flex-row::-webkit-scrollbar {
    display: none;
  }

  /* Left sidebar — full viewport width panel */
  [data-page="create"] > .flex.flex-row > aside {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    scroll-snap-align: start;
    border-right: none !important;
    height: calc(100vh - 56px) !important;
    height: calc(100dvh - 56px) !important;
  }

  /* Right panel — full viewport width panel */
  [data-page="create"] > .flex.flex-row > main {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    flex: none !important;
    scroll-snap-align: start;
    padding: 16px !important;
  }

  /* Right edge fade gradient on left panel — hints there's more content */
  [data-page="create"] > .flex.flex-row > aside::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, rgba(5, 5, 5, 0.6));
    pointer-events: none;
    z-index: 5;
    opacity: 0.5;
  }

  /* --- LEFT PANEL COMPACT STYLING --- */

  /* Tab buttons — compact padding, bigger touch targets */
  [data-page="create"] aside > .px-3.pt-4.pb-3 {
    padding: 10px 12px !important;
  }
  [data-page="create"] aside > .px-3.pt-4.pb-3 button {
    min-height: 40px;
  }

  /* Scrollable form content — compact spacing */
  [data-page="create"] aside > .flex-grow.overflow-y-auto {
    padding: 10px 12px !important;
  }

  /* Model selector — compact */
  [data-page="create"] #modelSelectorContainer {
    padding: 8px !important;
  }

  /* Quick model thumbnails — slightly smaller */
  [data-page="create"] .quick-video-model-thumb .w-11.h-11,
  [data-page="create"] .quick-image-model-thumb .w-11.h-11 {
    width: 38px !important;
    height: 38px !important;
  }
  [data-page="create"] .quick-video-model-thumb p,
  [data-page="create"] .quick-image-model-thumb p {
    width: 38px !important;
  }

  /* Change Model button — compact */
  [data-page="create"] #changeModelBtn {
    padding: 4px 10px !important;
    font-size: 0.6875rem !important;
  }

  /* Prompt textarea — comfortable mobile size */
  [data-page="create"] #prompt {
    min-height: 72px !important;
    font-size: 14px !important;
  }

  /* Upload sections — compact */
  [data-page="create"] #uploadSection,
  [data-page="create"] #audioUploadSection {
    padding: 10px !important;
  }

  /* Bottom action buttons — compact, safe area aware */
  [data-page="create"] aside > .flex-shrink-0.px-3 {
    padding: 8px 12px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Generate button — good touch target */
  [data-page="create"] #generateBtn {
    min-height: 48px !important;
    font-size: 0.9375rem !important;
  }

  /* Presets button — slightly compact */
  [data-page="create"] #openPresetsBtn {
    min-height: 40px !important;
    font-size: 0.8125rem !important;
  }

  /* --- RIGHT PANEL MOBILE TWEAKS --- */

  /* Hero title — smaller */
  [data-page="create"] #rightPanelTitle {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  /* Hero description — compact */
  [data-page="create"] #rightPanelDescription {
    font-size: 0.875rem !important;
    margin-top: 12px !important;
  }

  /* 3-step grid — single column */
  [data-page="create"] .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 24px !important;
  }

  /* Step cards — full width, shorter */
  [data-page="create"] .w-56.h-32 {
    width: 100% !important;
    height: 80px !important;
  }

  /* --- VIDEO PLAY ICON OVERLAY — Always visible on mobile --- */
  [data-page="create"] .arturum-video-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.25);
    z-index: 20;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 55% center;
    background-size: 22px;
    transition: opacity 0.2s;
  }
  /* Hide play overlay when video is actually playing */
  [data-page="create"] .arturum-video-container.is-playing::before {
    opacity: 0;
  }

  /* Video controls — always visible on mobile (no hover on touch) */
  [data-page="create"] .arturum-controls {
    opacity: 1 !important;
  }

  /* --- ACTION BUTTONS — Horizontal scrollable row --- */
  [data-page="create"] #videoStackContainer .flex.gap-2.mt-3 {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding-bottom: 2px;
  }
  [data-page="create"] #videoStackContainer .flex.gap-2.mt-3::-webkit-scrollbar {
    display: none;
  }
  [data-page="create"] #videoStackContainer .flex.gap-2.mt-3 > button,
  [data-page="create"] #videoStackContainer .flex.gap-2.mt-3 > a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 0.6875rem !important;
    padding: 8px 12px !important;
    min-height: 36px;
  }

  /* --- PANEL INDICATOR (injected by JS) — left corner, brand colors --- */
  .create-panel-indicator {
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    display: flex;
    gap: 8px;
    z-index: 50;
    background: rgba(20, 20, 20, 0.88);
    padding: 6px 14px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(234, 40, 49, 0.15);
  }
  .create-panel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .create-panel-dot.active {
    background: #EA2831;
    width: 24px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(234, 40, 49, 0.4);
  }

  /* --- MODALS — Full screen, single-row categories, pinned footer --- */

  /* All modals — full screen vertical layout */
  .presets-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    flex-direction: column !important;
  }

  /* ---- VIDEO PRESETS (#presetsModal) — hide sidebar entirely (no categories) ---- */
  #presetsModal .presets-modal > .w-56 {
    display: none !important;
  }

  /* ---- VIDEO PRO PRESETS (#videoPresetsModal) — identical to image presets ---- */

  /* Sidebar → single-row category strip */
  #videoPresetsModal .w-64 {
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0 !important;
    padding: 6px 12px !important;
    overflow: hidden !important;
    display: block !important;
  }
  /* Hide heading, description, media settings, selection summary */
  #videoPresetsModal .w-64 > .px-4.pt-5.pb-3 {
    display: none !important;
  }
  #videoPresetsModal .w-64 > #videoPresetsMediaSection {
    display: none !important;
  }
  #videoPresetsModal .w-64 > .p-4 {
    display: none !important;
  }
  /* Category scroller wrapper — no height constraints */
  #videoPresetsModal .w-64 > .flex-1.overflow-y-auto {
    overflow: visible !important;
    padding: 0 !important;
    flex: none !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Category list — single horizontal scrollable row */
  #videoPresetsModal #videoPresetsCategoryList {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 5px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
  }
  #videoPresetsModal #videoPresetsCategoryList::-webkit-scrollbar {
    display: none;
  }

  /* Dissolve group wrappers — all children become inline flex items */
  #videoPresetsModal #videoPresetsCategoryList > div {
    display: contents !important;
    margin: 0 !important;
  }
  #videoPresetsModal #videoPresetsCategoryList > div > .space-y-0\.5 {
    display: contents !important;
  }

  /* Group headers — compact inline separator labels */
  #videoPresetsModal #videoPresetsCategoryList > div > .px-2.py-1 {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.5625rem !important;
    color: rgba(255, 255, 255, 0.3);
    gap: 3px !important;
    padding: 3px 6px !important;
    margin: 0 2px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Category buttons — inline pills, single line */
  #videoPresetsModal .video-preset-category-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    width: auto !important;
    padding: 5px 10px !important;
    font-size: 0.625rem !important;
    min-height: 28px;
  }
  /* Hide icon inside buttons on mobile to save space */
  #videoPresetsModal .video-preset-category-btn .material-symbols-outlined {
    display: none !important;
  }

  /* Main content wrapper — fill remaining space */
  #videoPresetsModal .flex-1.flex.flex-col {
    min-height: 0 !important;
    flex: 1 1 0% !important;
  }

  /* Scrollable grid area */
  #videoPresetsModal .flex-1.flex.flex-col > .flex-1.overflow-y-auto {
    padding: 8px !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    flex: 1 1 0% !important;
  }

  /* Footer — always visible, pinned to bottom */
  #videoPresetsModal .border-t.bg-black\/30 {
    flex-shrink: 0 !important;
  }

  /* Prompt row — single column, wider textarea */
  #videoPresetsModal .prompts-compact-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 8px 12px !important;
  }
  /* Hide live preview — keep only the editable prompt */
  #videoPresetsModal .prompts-compact-row > .prompt-section:not(.editable-prompt-area) {
    display: none !important;
  }
  #videoPresetsModal .prompts-compact-row textarea {
    height: 56px !important;
    font-size: 12px !important;
  }
  #videoPresetsModal .prompts-compact-row .prompt-label {
    font-size: 8px !important;
  }
  #videoPresetsModal .prompts-compact-row .text-\[9px\] {
    display: none !important;
  }

  /* Controls row — restructured: advanced options on top, buttons on bottom */
  #videoPresetsModal .px-5.py-2\.5.flex {
    padding: 0 !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  /* Advanced options row wrapper (JS moves dropdowns into this) */
  #videoPresetsModal .presets-advanced-options-row {
    display: none !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    order: 1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  #videoPresetsModal .presets-advanced-options-row::-webkit-scrollbar {
    display: none;
  }
  #videoPresetsModal .px-5.py-2\.5.flex.advanced-open .presets-advanced-options-row {
    display: flex !important;
  }
  /* Each dropdown inside the row — prevent shrinking so they scroll */
  #videoPresetsModal .presets-advanced-options-row > .flex.items-center.gap-2 {
    flex-shrink: 0 !important;
    white-space: nowrap;
  }

  /* Hide Cancel button on mobile */
  #videoPresetsModal #cancelVideoPresetsBtn {
    display: none !important;
  }

  /* Generation status — full width above buttons */
  #videoPresetsModal #videoGenerationStatusInline {
    padding: 4px 12px !important;
    order: 2;
  }

  /* Bottom buttons row (injected wrapper) */
  #videoPresetsModal .presets-bottom-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    order: 99;
  }

  /* Generate button — fill remaining space */
  #videoPresetsModal #generateFromVideoPresetsBtn {
    flex: 1 1 0% !important;
    min-height: 46px !important;
    justify-content: center !important;
    font-size: 0.8125rem !important;
    border-radius: 8px !important;
    order: 99;
  }

  /* ---- AUDIO PRO PRESETS (#audioPresetsModal) — identical to video/image presets ---- */

  /* Sidebar → single-row category strip */
  #audioPresetsModal .w-64 {
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0 !important;
    padding: 6px 12px !important;
    overflow: hidden !important;
    display: block !important;
  }
  /* Hide heading and description */
  #audioPresetsModal .w-64 > .px-4.pt-5.pb-3 {
    display: none !important;
  }
  /* Category scroller wrapper — no height constraints */
  #audioPresetsModal .w-64 > .flex-1.overflow-y-auto {
    overflow: visible !important;
    padding: 0 !important;
    flex: none !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Category list — single horizontal scrollable row */
  #audioPresetsModal #audioPresetsCategoryList {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 5px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
  }
  #audioPresetsModal #audioPresetsCategoryList::-webkit-scrollbar {
    display: none;
  }

  /* Dissolve group wrappers */
  #audioPresetsModal .audio-preset-group {
    display: contents !important;
    margin: 0 !important;
  }
  #audioPresetsModal .audio-preset-group-items {
    display: contents !important;
  }

  /* Group headers — compact inline separator labels */
  #audioPresetsModal .audio-preset-group-header {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.5625rem !important;
    color: rgba(255, 255, 255, 0.3);
    gap: 3px !important;
    padding: 3px 6px !important;
    margin: 0 2px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Category buttons — inline pills */
  #audioPresetsModal .audio-preset-category-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    width: auto !important;
    padding: 5px 10px !important;
    font-size: 0.625rem !important;
    min-height: 28px;
  }
  #audioPresetsModal .audio-preset-category-btn .material-symbols-outlined {
    display: none !important;
  }

  /* Main content wrapper */
  #audioPresetsModal .flex-1.flex.flex-col {
    min-height: 0 !important;
    flex: 1 1 0% !important;
  }

  /* Scrollable grid area */
  #audioPresetsModal .flex-1.flex.flex-col > .flex-1.overflow-y-auto {
    padding: 8px !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    flex: 1 1 0% !important;
  }

  /* Footer — always visible */
  #audioPresetsModal .border-t.bg-black\/30 {
    flex-shrink: 0 !important;
  }

  /* Prompt row — wider textarea */
  #audioPresetsModal .prompts-compact-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 8px 12px !important;
  }
  #audioPresetsModal .prompts-compact-row textarea {
    height: 56px !important;
    font-size: 12px !important;
  }
  #audioPresetsModal .prompts-compact-row .prompt-label {
    font-size: 8px !important;
  }
  #audioPresetsModal .prompts-compact-row .text-\[9px\] {
    display: none !important;
  }

  /* Controls row — restructured */
  #audioPresetsModal .px-5.py-2\.5.flex {
    padding: 0 !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  /* Advanced options row wrapper */
  #audioPresetsModal .presets-advanced-options-row {
    display: none !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    order: 1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  #audioPresetsModal .presets-advanced-options-row::-webkit-scrollbar {
    display: none;
  }
  #audioPresetsModal .px-5.py-2\.5.flex.advanced-open .presets-advanced-options-row {
    display: flex !important;
  }
  #audioPresetsModal .presets-advanced-options-row > .flex.items-center.gap-2 {
    flex-shrink: 0 !important;
    white-space: nowrap;
  }

  /* Hide Cancel button on mobile */
  #audioPresetsModal #cancelAudioPresetsBtn {
    display: none !important;
  }

  /* Generation status */
  #audioPresetsModal #audioPresetsGenerationStatus {
    padding: 4px 12px !important;
    order: 2;
  }

  /* Bottom buttons row */
  #audioPresetsModal .presets-bottom-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    order: 99;
  }

  /* Generate button — fill remaining space */
  #audioPresetsModal #generateFromAudioPresetsBtn {
    flex: 1 1 0% !important;
    min-height: 46px !important;
    justify-content: center !important;
    font-size: 0.8125rem !important;
    border-radius: 8px !important;
    order: 99;
  }

  /* ---- VIDEO MODELS (#modelsModal) — single row categories ---- */
  #modelsModal .presets-modal > .w-56 {
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
    overflow: hidden !important;
  }
  #modelsModal .w-56 > .px-4 {
    padding: 0 !important;
  }
  #modelsModal .w-56 h2,
  #modelsModal .w-56 h3 {
    display: none !important;
  }
  #modelsModal .w-56 nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #modelsModal .w-56 nav::-webkit-scrollbar {
    display: none;
  }
  #modelsModal .w-56 nav button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 5px 12px !important;
    font-size: 0.6875rem !important;
    min-height: 30px;
  }

  /* ---- IMAGE MODELS (#imageModelsModal) — single row categories ---- */
  #imageModelsModal .presets-modal > .w-56 {
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
    overflow: hidden !important;
  }
  #imageModelsModal .w-56 > .px-4 {
    padding: 0 !important;
  }
  #imageModelsModal .w-56 h2,
  #imageModelsModal .w-56 h3 {
    display: none !important;
  }
  #imageModelsModal .w-56 nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #imageModelsModal .w-56 nav::-webkit-scrollbar {
    display: none;
  }
  #imageModelsModal .w-56 nav button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 5px 12px !important;
    font-size: 0.6875rem !important;
    min-height: 30px;
  }

  /* ---- PRO IMAGE PRESETS (#imagePresetsModal) — single row + pinned footer ---- */

  /* Sidebar → single-row category strip */
  #imagePresetsModal .w-64 {
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0 !important;
    padding: 6px 12px !important;
    overflow: hidden !important;
    display: block !important;
  }
  /* Hide heading, description, upload section, selection summary */
  #imagePresetsModal .w-64 > .px-4.pt-5.pb-3 {
    display: none !important;
  }
  #imagePresetsModal .w-64 > .flex-shrink-0 {
    display: none !important;
  }
  #imagePresetsModal .w-64 > .p-4 {
    display: none !important;
  }
  /* Category scroller wrapper — no height constraints */
  #imagePresetsModal .w-64 > .flex-1.overflow-y-auto {
    overflow: visible !important;
    padding: 0 !important;
    flex: none !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Category list — single horizontal scrollable row */
  #imagePresetsModal #proPresetsCategoryList {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 5px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
  }
  #imagePresetsModal #proPresetsCategoryList::-webkit-scrollbar {
    display: none;
  }

  /* Dissolve group wrappers — all children become inline flex items */
  #imagePresetsModal .preset-category-group {
    display: contents !important;
    margin: 0 !important;
  }
  #imagePresetsModal .preset-category-group-items {
    display: contents !important;
  }

  /* Group headers — compact inline separator labels */
  #imagePresetsModal .preset-category-group-header {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.5625rem !important;
    color: rgba(255, 255, 255, 0.3);
    gap: 3px !important;
    padding: 3px 6px !important;
    margin: 0 2px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  /* Hide number circle on mobile — just show group name */
  #imagePresetsModal .preset-category-group-header .group-number {
    width: 14px !important;
    height: 14px !important;
    font-size: 0.5rem !important;
    min-width: 14px !important;
  }

  /* Category buttons — inline pills, single line */
  #imagePresetsModal .preset-category-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    width: auto !important;
    padding: 5px 10px !important;
    font-size: 0.625rem !important;
    min-height: 28px;
  }
  /* Hide icon inside buttons on mobile to save space */
  #imagePresetsModal .preset-category-btn .material-symbols-outlined {
    display: none !important;
  }

  /* Main content wrapper — fill remaining space between header and footer */
  #imagePresetsModal .flex-1.flex.flex-col {
    min-height: 0 !important;
    flex: 1 1 0% !important;
  }

  /* Scrollable grid area */
  #imagePresetsModal .flex-1.flex.flex-col > .flex-1.overflow-y-auto {
    padding: 8px !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    flex: 1 1 0% !important;
  }

  /* Footer — always visible, pinned to bottom, compact */
  #imagePresetsModal .border-t.bg-black\/30 {
    flex-shrink: 0 !important;
  }

  /* Prompt row — single column, wider textarea */
  #imagePresetsModal .prompts-compact-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 8px 12px !important;
  }
  /* Hide live preview — keep only the editable prompt */
  #imagePresetsModal .prompts-compact-row > .prompt-section:not(.editable-prompt-area) {
    display: none !important;
  }
  #imagePresetsModal .prompts-compact-row textarea {
    height: 56px !important;
    font-size: 12px !important;
  }
  /* Smaller prompt label */
  #imagePresetsModal .prompts-compact-row .prompt-label {
    font-size: 8px !important;
  }
  #imagePresetsModal .prompts-compact-row .text-\[9px\] {
    display: none !important;
  }

  /* Controls row — restructured: advanced options on top, buttons on bottom */
  #imagePresetsModal .px-5.py-2\.5.flex {
    padding: 0 !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  /* Advanced options row wrapper (JS moves dropdowns into this) */
  #imagePresetsModal .presets-advanced-options-row {
    display: none !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    order: 1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  #imagePresetsModal .presets-advanced-options-row::-webkit-scrollbar {
    display: none;
  }
  #imagePresetsModal .px-5.py-2\.5.flex.advanced-open .presets-advanced-options-row {
    display: flex !important;
  }
  /* Each dropdown inside the row — prevent shrinking so they scroll */
  #imagePresetsModal .presets-advanced-options-row > .flex.items-center.gap-2 {
    flex-shrink: 0 !important;
    white-space: nowrap;
  }

  /* Hide Cancel button on mobile */
  #imagePresetsModal #cancelProPresetsBtn {
    display: none !important;
  }

  /* Generation status — full width above buttons */
  #imagePresetsModal #generationStatusInline {
    padding: 4px 12px !important;
    order: 2;
  }

  /* Bottom buttons row (injected wrapper) — fixed at bottom */
  #imagePresetsModal .presets-bottom-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    order: 99;
  }

  /* Generate button — fill remaining space */
  #imagePresetsModal #generateFromPresetsBtn {
    flex: 1 1 0% !important;
    min-height: 46px !important;
    justify-content: center !important;
    font-size: 0.8125rem !important;
    border-radius: 8px !important;
    order: 99;
  }

  /* Advanced toggle button (injected by JS) */
  .presets-advanced-toggle {
    display: flex !important;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s;
    min-height: 46px;
    order: 99;
  }
  .presets-advanced-toggle.is-open {
    background: rgba(234, 40, 49, 0.1);
    border-color: rgba(234, 40, 49, 0.3);
    color: #EA2831;
  }
  .presets-advanced-toggle:active {
    background: rgba(255, 255, 255, 0.1);
  }
  .presets-advanced-toggle .material-symbols-outlined {
    font-size: 16px !important;
    transition: transform 0.2s;
  }
  .presets-advanced-toggle.is-open .material-symbols-outlined {
    transform: rotate(180deg);
  }

  /* ---- ALL MODALS — shared content styling ---- */

  /* Search header — compact */
  .presets-modal .px-6.pt-5.pb-4,
  .presets-modal .px-5.pt-4.pb-3 {
    padding: 8px 12px !important;
  }

  /* Close buttons — bigger touch target */
  .presets-modal #closeModelsBtn,
  .presets-modal #closePresetsBtn,
  .presets-modal #closeImagePresetsBtn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Card grids — 2 columns */
  .presets-modal .grid.grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .presets-modal .grid.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .presets-modal .grid.grid-cols-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* Scrollable content area for non-pro modals */
  .presets-modal > .flex-1.flex.flex-col {
    min-height: 0 !important;
    flex: 1 1 0% !important;
  }
  .presets-modal .flex-1.overflow-y-auto {
    overflow-y: auto !important;
    min-height: 0 !important;
    flex: 1 1 0% !important;
    padding: 8px !important;
  }
}


/* ============================================================================
   DELETE CONFIRMATION MODALS — Fix left offset on mobile
   Desktop: left-[360px] offsets from sidebar — untouched
   Mobile: full-screen overlay (left: 0)
   ============================================================================ */

@media (max-width: 768px) {
  #deleteConfirmModal,
  #deleteTrackConfirmModal,
  #deleteImageConfirmModal {
    left: 0 !important;
  }
}


/* ============================================================================
   CREATION / UPLOAD MODALS — Bottom-sheet on mobile
   Desktop: centered max-w-600px with 32px padding — untouched
   Mobile: full width, bottom-sheet style, compact padding, touch-friendly
   ============================================================================ */

@media (max-width: 768px) {
  /* Overlay — full screen on mobile */
  .creation-modal-overlay {
    align-items: stretch !important;
    padding: 0 !important;
  }

  /* Container — full screen, no border radius */
  .creation-modal-container {
    max-width: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
  }

  /* Header — compact padding */
  .creation-modal-header {
    padding: 12px 16px 12px !important;
  }
  .creation-modal-header h2 {
    font-size: 1.25rem !important;
    margin-bottom: 2px !important;
  }
  .creation-modal-header p {
    font-size: 0.75rem !important;
  }

  /* Close button — bigger touch target */
  .creation-close-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    top: 8px !important;
    right: 8px !important;
  }

  /* Body — compact padding */
  .creation-modal-body {
    padding: 12px 16px !important;
  }

  /* Footer — compact, safe-area aware, hide cancel button */
  .creation-modal-footer {
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Hide Cancel button — confirm/submit fills the full width */
  .creation-modal-footer > button:first-child:not(:only-child) {
    display: none !important;
  }
  /* Submit button — full width */
  .creation-modal-footer > button:last-child {
    flex: 1 !important;
    min-height: 48px !important;
  }

  /* Upload area — compact, disable hover transform */
  .creation-upload-area {
    padding: 14px 12px 12px !important;
    border-radius: 12px !important;
  }
  .creation-upload-area:hover {
    transform: none !important;
  }
  .upload-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 8px !important;
  }
  .upload-icon-svg {
    width: 18px !important;
    height: 18px !important;
  }
  .upload-text-primary {
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }
  .upload-text-secondary {
    font-size: 11px !important;
  }
  .upload-format-badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }

  /* Tab buttons in modals — compact, single-line text */
  .creation-modal-body .flex.gap-2.mb-6 {
    gap: 4px !important;
    margin-bottom: 12px !important;
    padding: 3px !important;
  }
  .creation-modal-body .flex.gap-2.mb-6 button {
    min-height: 40px;
    padding: 8px 6px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }
  /* Hide tab icons on mobile — text-only tabs to fit all inline */
  .creation-modal-body .flex.gap-2.mb-6 .material-symbols-outlined {
    display: none !important;
  }
  /* The inner flex wrapper — tighten gap */
  .creation-modal-body .flex.gap-2.mb-6 button .flex.items-center.justify-center.gap-2 {
    gap: 0 !important;
  }

  /* File preview — compact gap */
  .creation-file-preview {
    gap: 8px !important;
  }

  /* ---- IMAGE SLOT GRIDS IN SIDEBAR ---- */
  /* Keep all slot grids at their original column count (compact, like Nano Banana Pro) */

  /* VEO 3.1 3-col image slots — tighten gap */
  #veo31ImageSlots .grid.grid-cols-3 {
    gap: 4px !important;
  }

  /* ---- UPLOAD MODAL MEDIA GRIDS ---- */

  /* Profile media grid inside upload modal — 2 columns, square cards */
  #createProfileMediaGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding-right: 0 !important;
  }
  #createProfileMediaGrid > div[class*="relative"] {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 100% !important;
    overflow: hidden !important;
  }
  #createProfileMediaGrid > div[class*="relative"] > * {
    position: absolute !important;
    inset: 0 !important;
  }
  #createProfileMediaGrid > div[class*="relative"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* VEO 3.1 library media grid — 2 columns, clean layout */
  #veo31LibraryMediaGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding-right: 0 !important;
  }
  /* Each library item — force square via padding-bottom trick (bulletproof across all mobile browsers) */
  #veo31LibraryMediaGrid .veo31-library-item {
    aspect-ratio: unset !important;
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 100% !important;
    overflow: hidden !important;
  }
  /* All children sit inside the padding-bottom square */
  #veo31LibraryMediaGrid .veo31-library-item > * {
    position: absolute !important;
    inset: 0 !important;
  }
  /* Image fills the square and crops */
  #veo31LibraryMediaGrid .veo31-library-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* VEO 3.1 upload preview grid — 2 columns */
  #veo31LibraryUploadPreview {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* Profile media filter buttons — scrollable if needed */
  #createUploadContentProfile .flex.gap-2.mb-4 {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  #createUploadContentProfile .flex.gap-2.mb-4::-webkit-scrollbar {
    display: none;
  }
  #createUploadContentProfile .create-profile-media-filter {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 36px;
  }

  /* Selection summary — compact */
  .creation-modal-body > .mt-4.p-3 {
    padding: 8px 12px !important;
    margin-top: 12px !important;
  }

  /* VEO 3.1 Generate tab — compact spacing */
  #veo31LibraryContentGenerate .mb-4 {
    margin-bottom: 12px !important;
  }
  #veo31LibraryContentGenerate textarea {
    font-size: 14px !important;
  }

  /* VEO 3.1 model selection buttons — scrollable */
  #veo31LibraryContentGenerate .flex.gap-2:has(.library-gen-model-btn) {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
  }
  #veo31LibraryContentGenerate .flex.gap-2:has(.library-gen-model-btn)::-webkit-scrollbar {
    display: none;
  }
  .library-gen-model-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.75rem !important;
    min-height: 40px;
  }

  /* ---- VOICE CLONE MODAL ---- */
  #voiceCloneModal .creation-modal-container {
    max-width: 100% !important;
  }
}

/* Remove hover transform on upload area for touch devices */
@media (hover: none) {
  .creation-upload-area:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .creation-upload-area:hover .upload-icon-wrapper {
    transform: none !important;
  }
  .creation-upload-area:active {
    border-color: #EA2831;
    transition: border-color 0.1s ease;
  }
}


/* ============================================================================
   STORIES / STORYBOARD EDITOR PAGE
   ============================================================================ */

@media (max-width: 768px) {

  /* --- Editor container: horizontal scroll-snap between chat & storyboard --- */
  [data-page="stories"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    height: calc(100vh - 56px) !important;
    height: calc(100dvh - 56px) !important;
  }
  [data-page="stories"]::-webkit-scrollbar {
    display: none;
  }

  /* --- Left panel (AI Chat) — full viewport width --- */
  [data-page="stories"] > div:first-child {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    scroll-snap-align: start;
    border-right: none !important;
    height: 100% !important;
    position: relative;
  }

  /* Gradient hint on right edge — signals swipeable content */
  [data-page="stories"] > div:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, rgba(5, 5, 5, 0.6));
    pointer-events: none;
    z-index: 5;
    opacity: 0.5;
  }

  /* --- Right panel (Storyboard content) — full viewport width --- */
  [data-page="stories"] > div:last-child {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    flex: none !important;
    scroll-snap-align: start;
    height: 100% !important;
  }

  /* --- Chat header — compact on mobile --- */
  [data-page="stories"] > div:first-child > div:first-child {
    height: 56px !important;
    padding: 0 12px !important;
  }
  [data-page="stories"] > div:first-child > div:first-child h3 {
    font-size: 13px !important;
  }
  /* Hide the emoji icon box on mobile */
  [data-page="stories"] > div:first-child > div:first-child > div > div:first-child {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }

  /* --- Chat messages area — slightly less padding --- */
  #chat-messages {
    padding: 12px !important;
    gap: 12px !important;
  }

  /* --- Panel indicator (inline, above quick actions) --- */
  .stories-panel-indicator {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px 0 4px;
    background: linear-gradient(180deg, transparent 0%, rgba(19, 19, 19, 0.8) 100%);
  }

  /* --- Quick actions bar — compact --- */
  #quick-actions-bar {
    padding: 6px 10px !important;
  }
  .quick-action-btn {
    width: 34px !important;
    height: 34px !important;
  }
  /* Hide "Attach" text, keep icon */
  #chat-attach-btn {
    padding: 6px 8px !important;
    font-size: 0 !important;
  }
  #chat-attach-btn .material-symbols-outlined {
    font-size: 18px !important;
  }

  /* --- Chat input area — compact --- */
  [data-page="stories"] > div:first-child > div:last-child {
    padding: 8px 12px !important;
  }
  #chat-input {
    padding: 12px 14px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
  #chat-send-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }

  /* --- Right panel: content header with tabs — compact --- */
  [data-page="stories"] > div:last-child > div:first-child {
    height: auto !important;
    min-height: 48px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* View tabs — smaller, horizontal scroll */
  [data-page="stories"] > div:last-child > div:first-child > div:first-child {
    gap: 2px !important;
    padding: 3px !important;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
  }
  [data-page="stories"] > div:last-child > div:first-child > div:first-child::-webkit-scrollbar {
    display: none;
  }
  .view-tab {
    padding: 8px 10px !important;
    font-size: 12px !important;
    gap: 4px !important;
    white-space: nowrap;
  }

  /* Hide desktop share button, use tab icon instead */
  #content-actions {
    display: none !important;
  }
  #share-tab-btn {
    display: flex !important;
  }

  /* --- Content scroll area --- */
  .content-scroll {
    padding: 12px !important;
  }

  /* Scene cards — mobile-friendly */
  .scene-card {
    border-radius: 12px !important;
  }

  /* Scene header — wrap: title row 1, actions row 2 */
  .scene-card > div:first-child {
    flex-wrap: wrap !important;
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  /* Title side — full width */
  .scene-card > div:first-child > div:first-child {
    width: 100% !important;
    gap: 10px !important;
  }
  .scene-card > div:first-child > div:first-child > div:first-child {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
    flex-shrink: 0;
  }
  .editable-scene-title {
    font-size: 14px !important;
  }
  /* Actions side — full width, scroll horizontally */
  .scene-card > div:first-child > div:last-child {
    width: 100% !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .ai-generate-all-btn {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  /* Scene description — compact padding */
  .editable-scene-description {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }

  /* Scene setup grid (cast/location/dialogue) — stack vertically */
  .scene-card > div:nth-child(3) > div {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .scene-card > div:nth-child(3) {
    padding: 12px 14px !important;
  }
  .scene-card .scene-setup-card {
    min-width: 0;
  }

  /* --- Hero image strips (thumbnails + More/Angles buttons) — below image on mobile --- */

  /* Hero containers: allow strip to overflow below */
  .scene-cast-hero,
  .scene-loc-hero,
  .scene-shot-hero {
    overflow: visible !important;
    margin-bottom: 42px !important;
  }

  /* Strip: reposition below image instead of overlaid inside */
  .scast-strip,
  .sloc-strip,
  .sshot-strip {
    bottom: -42px !important;
    left: 0 !important;
    right: 0 !important;
    opacity: 1 !important;
    background: rgba(15, 10, 10, 0.95) !important;
    padding: 6px 8px !important;
    border-radius: 0 0 8px 8px;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  /* "More" buttons: red bg, consistent Shot style across all cards */
  .generate-scene-cast-btn,
  .generate-scene-shot-btn,
  .generate-scene-loc-btn {
    order: 10 !important;
    flex: 0 0 calc(50% - 3px) !important;
    height: 36px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    justify-content: center !important;
    background: rgba(230, 57, 70, 0.8) !important;
    border: none !important;
    color: white !important;
  }

  /* "Angles" buttons: dark bg with border, consistent Shot style */
  .expand-scene-cast-btn,
  .expand-scene-shot-btn,
  .expand-scene-loc-btn {
    order: 11 !important;
    flex: 0 0 calc(50% - 3px) !important;
    height: 36px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
  }

  /* Strip spacing — Cast & Location */
  .scene-cast-hero,
  .scene-loc-hero {
    margin-bottom: 48px !important;
  }
  .scast-strip,
  .sloc-strip {
    bottom: -48px !important;
  }

  /* Shot hero — more bottom space so strip doesn't crowd Wide/5s/10s below */
  .shot-card .scene-shot-hero {
    margin-bottom: 64px !important;
  }
  .sshot-strip {
    bottom: -56px !important;
    padding: 8px !important;
    margin-bottom: 8px !important;
  }

  /* Expand button (⛶) — always visible on touch */
  .scene-cast-expand-btn,
  .scene-shot-expand-btn,
  .scene-loc-expand-btn {
    opacity: 1 !important;
    width: 32px !important;
    height: 32px !important;
  }

  /* Shot cards within scenes — stack nicely */
  .shot-card {
    border-radius: 8px !important;
  }

  /* --- Cast view — single column grid --- */
  #characters-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Cast header — stack button below */
  #cast-view > div > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* --- Style view — mobile adjustments --- */
  .style-preset-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
  .aspect-ratio-btn {
    padding: 10px 14px !important;
    font-size: 12px !important;
  }

  /* --- Locations grid — single column --- */
  #locations-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* --- Image library modal — mobile full-screen --- */
  #storyImageLibraryModal > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  /* Tab buttons — single line, no wrapping */
  .img-lib-tab {
    white-space: nowrap !important;
    padding: 10px 8px !important;
    font-size: 12px !important;
  }
  /* Large prompt area */
  #imgLibGeneratePrompt {
    height: 35vh !important;
    min-height: 150px !important;
    font-size: 14px !important;
  }
  /* 2-column media grid */
  #imgLibMediaGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* --- Angles/expand progress — single column on mobile --- */
  .expand-progress > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .expand-slot-preview {
    width: 48px !important;
    height: 30px !important;
  }

  /* --- Stories list view — compact cards --- */
  #storyboards-grid {
    gap: 12px !important;
    padding: 0 4px !important;
  }

  /* Create story modal — full screen */
  #create-modal > div:last-child {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

/* --- Tablet adjustments (769px - 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
  [data-page="stories"] > div:first-child {
    width: 340px !important;
    min-width: 340px !important;
  }
}

/* --- Remove hover effects on touch devices --- */
@media (hover: none) {
  .scene-card:hover,
  .shot-card:hover {
    transform: none !important;
  }
  .quick-action-btn:hover {
    transform: none !important;
  }
  .quick-action-btn:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease;
  }
}


/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .thumbnail-container,
  .carousel-container {
    scroll-behavior: auto !important;
  }
}


/* ============================================================================
   PERFORMANCE
   ============================================================================ */

@media (max-width: 768px) {
  .carousel-item {
    contain: layout style paint;
  }
}