/* LuxuryAI — Mobile / iPad layer.
   Loaded last in every HTML page so overrides win automatically.
   Canonical breakpoints (mirror these px values everywhere):
     xs ≤ 480, sm ≤ 640, md ≤ 820 (iPad portrait), lg ≤ 1024 (iPad landscape), xl ≤ 1280
   See /Users/david/.claude/plans/bitte-optimiere-die-gesamte-hidden-otter.md
   and /docs/ui-conventions.md for the design contract. */

/* ── Shell shape override — must come first ──────────────────────────────
   The dashboard root element carries BOTH classes: <div class="lx-app app">
   and <aside class="lx-sidebar sidebar">. lx-theme-remix.css defines `.app`
   with `grid-template-columns: 248px 1fr` and `.sidebar` with
   `position: relative` — both load AFTER lx-shell.css with equal specificity,
   so the Mobile media-queries in lx-shell.css (which target `.lx-app` /
   `.lx-sidebar` only) were never winning the cascade. Result before this
   fix: on iPhone the sidebar held a 248px column and content was crushed
   to ~142px wide.
   We bump specificity to (0,2,0) with the compound class selectors + add
   !important against future Remix-layer additions. */
@media (max-width: 1024px) {
  .lx-app.app {
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
  }
  .lx-sidebar.sidebar {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 100;
    border-right: 0 !important;
  }
  body.lx-drawer-open .lx-sidebar.sidebar {
    transform: translateX(0) !important;
  }
  .lx-main.main { min-width: 0; }
  /* Topbar padding — Remix's .topbar (28px horizontal) outweighs
     lx-shell.css's mobile rule for the same reason as above. */
  .lx-topbar.topbar {
    padding: 0 14px !important;
  }
}

/* ── Global touch defaults (apply on every viewport so desktop laptops with
       touchscreens still get sane tap behaviour) ─────────────────────────── */
:where(button, a, [role="button"], summary, .lx-nav-item, .lxm-chip) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── Hover-capability gate ─────────────────────────────────────────────────
   Touch-only devices: neutralise hover-triggered hover artefacts (sticky
   "lit" buttons after tap) and use :active for tactile feedback instead. */
@media (hover: none) and (pointer: coarse) {
  .lx-nav-item:hover,
  .lxm-btn:hover,
  .kv-btn:hover,
  .lxm-pill-btn:hover,
  .lx-cta-pill:hover,
  .lx-icon-btn:hover,
  .feature-tab:hover,
  .lxm-chip-wrap:hover,
  .lx-vfm-pill:hover,
  .lx-img-card:hover,
  .lx-lightbox-btn:hover,
  .home-cta-btn:hover,
  .home-link-btn:hover,
  .pp-faq-head:hover,
  .upgrade-btn:hover,
  .single-plan-cta:hover,
  .calc-preset:hover,
  .set-btn:hover,
  .set-nav-item:hover,
  .admin-btn:hover,
  .lxm-howto-card:hover,
  .lxm-recent-card:hover {
    background: inherit;
    filter: none;
    transform: none;
    box-shadow: inherit;
  }
  .lx-nav-item:active,
  .lxm-btn:active,
  .kv-btn:active,
  .lxm-pill-btn:active,
  .lx-cta-pill:active,
  .home-cta-btn:active,
  .single-plan-cta:active,
  .upgrade-btn:active,
  .set-btn:active,
  .admin-btn:active {
    transform: scale(0.98);
  }
}

/* ── Mobile tier (≤820): min tap targets, iOS auto-zoom fix, safe area ─── */
@media (max-width: 820px) {
  /* Form inputs — 16px prevents iOS Safari focus-zoom and is comfortable for tapping */
  input[type="email"],
  input[type="password"],
  input[type="text"],
  input[type="url"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px;
  }

  /* Minimum tap targets — applied per element class so we don't bloat generic <button> */
  .lxm-btn,
  .kv-btn,
  .lxm-pill-btn,
  .lxm-pill-btn-accent,
  .lxm-btn-ghost,
  .lx-cta-pill,
  .upgrade-btn,
  .home-cta-btn,
  .home-link-btn,
  .home-nav-cta,
  .auth-card button[type="submit"],
  .auth-card .auth-cta,
  .set-btn,
  .set-nav-item,
  .admin-btn,
  .admin-tab,
  .lx-vfm-generate,
  .lx-vfm-pill,
  .lx-vfm-banner-btn,
  .pp-faq-head,
  .pp-faq-plus,
  .lxm-chip.tool-pill,
  .lxm-chip,
  .lx-lightbox-btn,
  .lx-lightbox-close,
  .lx-burger,
  .lx-icon-btn,
  .app-avatar,
  .feature-tab,
  .calc-preset,
  .single-plan-cta,
  .home-nav-burger {
    min-height: var(--touch-min);
  }
  /* Primary CTAs get 48px */
  .lxm-btn-primary,
  .lx-vfm-generate,
  .home-cta-btn.lg,
  .single-plan-cta,
  .auth-card button[type="submit"],
  .calc-cta {
    min-height: var(--touch-pref);
  }
  /* Icon-only buttons must be square */
  .lxm-dropzone-thumb-remove,
  .lx-brand-media-cell-del,
  .lx-vfm-modal-x,
  .lxm-srft-row-remove,
  .lx-lightbox-close,
  .lx-burger {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }
  /* Burger square */
  .lx-burger {
    width: var(--touch-min);
    height: var(--touch-min);
  }
}

/* ── Composer-Dock safe-area (Image-Gen floating bottom bar) ────────────── */
@media (max-width: 820px) {
  .composer-dock {
    left: 0;
    right: 0;
    padding-right: 0;
    padding-left: 0;
    bottom: calc(12px + var(--safe-bottom));
  }
  .app.compact .composer-dock {
    left: 0;
  }
  .composer {
    width: calc(100% - 24px);
    padding: 12px 14px calc(12px + var(--safe-bottom));
  }
  /* Horizontal-scrolling chip row — keeps all chip controls reachable without
     wrapping into 2-3 rows that eat composer real estate */
  .composer-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .composer-row::-webkit-scrollbar { display: none; }
  .composer-row > * { flex-shrink: 0; }
}

/* ── 100dvh fallback for iOS Safari bottom-bar bug ─────────────────────── */
@supports (height: 100dvh) {
  .lx-lightbox,
  .lx-brand-modal-overlay,
  .lx-vfm-modal {
    min-height: 100dvh;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Phase 2 — Tool-Form-Accordion + Modals as Bottom-Sheets
   ──────────────────────────────────────────────────────────────────────── */

/* ── Tool-Form Accordion (Mobile only) ─────────────────────────────────
   On mobile the .tool-form is wrapped by lx-mobile.js inside a <details>
   element so the long form can collapse with a one-line summary. Wraps
   only at ≤820; the desktop layout (340 + 1fr) is untouched. */
@media (max-width: 820px) {
  .tool-form-accordion {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .tool-form-accordion > summary.tfa-summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--touch-pref);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
  }
  .tool-form-accordion > summary::-webkit-details-marker,
  .tool-form-accordion > summary::marker { display: none; }
  .tool-form-accordion[open] > summary.tfa-summary {
    border-bottom: 1px solid var(--border);
  }
  .tfa-summary-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    flex-shrink: 0;
  }
  .tfa-summary-text {
    color: var(--text-muted);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }
  .tfa-chevron {
    margin-left: auto;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
    flex-shrink: 0;
  }
  .tool-form-accordion[open] .tfa-chevron { transform: rotate(180deg); }
  /* The wrapped .tool-form keeps its existing children, but lift its sticky
     behaviour off (also done in the panel's inline media query for safety) */
  .tool-form-accordion > .tool-form {
    position: static;
    padding: 6px 0 4px;
  }
  /* Video panel has the form in an <aside> on the right via .lx-tool-right.
     On mobile we collapse to single column AND put the form (accordion) on top */
  .tool-layout.lx-tool-right .tool-form-accordion { order: -1; }
  /* Start/End frame cards stack instead of side-by-side */
  .lx-vfm-frames { grid-template-columns: 1fr !important; gap: 10px; }
}

/* ── Bottom-Sheet treatment for full-screen overlays ───────────────────
   At ≤820 the standard modal overlays (Brand modal, Video model picker,
   Credits buy modal, etc.) become slide-up bottom sheets with a drag grip
   on top. The JS in lx-mobile.js wires pointer-swipe-down to dismiss. */
@media (max-width: 820px) {
  .lx-brand-modal-overlay,
  .lx-vfm-modal {
    align-items: flex-end;
    padding: 0;
  }
  .lx-brand-modal-card,
  .lx-vfm-modal-panel {
    max-width: none;
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    padding-bottom: calc(16px + var(--safe-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    animation: lxm-sheet-up 260ms cubic-bezier(.2, .8, .2, 1);
  }
  /* Drag grip pseudo — visually communicates "drag down to close" */
  .lx-brand-modal-card::before,
  .lx-vfm-modal-panel::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border-2);
    border-radius: 999px;
    margin: 10px auto 8px;
    flex-shrink: 0;
  }
  /* Wide variant — same treatment as default sheet on mobile */
  .lx-vfm-modal-panel.is-wide { max-width: none; }
}

@keyframes lxm-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ── Chip popovers (Image-Composer settings) become bottom-sheets ────── */
@media (max-width: 820px) {
  .lxm-chip-wrap[open] .lxm-chip-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    z-index: 1100;
    border-radius: 18px 18px 0 0;
    padding: 16px 16px calc(20px + var(--safe-bottom));
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: auto !important;
    min-width: 0;
    animation: lxm-sheet-up 240ms cubic-bezier(.2, .8, .2, 1);
  }
  /* Backdrop is faked via the ::before of the open <details> */
  .lxm-chip-wrap[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1099;
  }
  .lxm-chip-wrap[open] .lxm-chip-menu::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border-2);
    border-radius: 999px;
    margin: 0 auto 14px;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Phase 3 — Lightbox mobile layout + gesture cues
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .lx-lightbox {
    padding: 0;
    flex-direction: column;
  }
  .lx-lightbox-content {
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .lx-lightbox-stage {
    padding: calc(8px + var(--safe-top)) 12px 4px;
    min-height: 50vh;
    position: relative;
  }
  .lx-lightbox-side {
    border-radius: 18px 18px 0 0;
    max-height: 50vh;
    padding: 14px 16px calc(16px + var(--safe-bottom));
    border: 0;
    border-top: 1px solid var(--border);
    position: relative;
  }
  .lx-lightbox-side::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border-2);
    border-radius: 999px;
    margin: 0 auto 12px;
    flex-shrink: 0;
  }
  .lx-lightbox-close {
    top: calc(8px + var(--safe-top));
    right: 12px;
    background: rgba(8, 8, 8, 0.6);
    width: var(--touch-min);
    height: var(--touch-min);
    z-index: 2;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Phase 4 — Per-page mobile fixes (Marketing / Pricing / Auth / Account / Admin)
   ──────────────────────────────────────────────────────────────────────── */

/* ── Marketing / Home (index.html + lx-theme-home.css) ─────────────────── */
@media (max-width: 820px) {
  /* Feature deep-dive tabs scroll horizontally rather than wrapping into
     two rows that compress the icons */
  .feature-tabs {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .feature-tabs::-webkit-scrollbar { display: none; }
  .feature-tab {
    flex: 0 0 70%;
    scroll-snap-align: start;
  }
  .home-hero-actions {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .home-hero-actions > * {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  /* Missing 1col tier — these grids were stuck at 2col on phones */
  .stat-strip {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .home-footer-inner {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .home-hero-stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .marquee-track {
    font-size: clamp(22px, 5vw, 32px);
    animation-duration: 26s;
  }
}

/* ── Mobile navigation burger (Home + Pricing share .home-nav markup) ─── */
.home-nav-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--ink-3);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: var(--touch-min);
  height: var(--touch-min);
  margin-left: auto;
}
.home-nav-burger svg { width: 22px; height: 22px; }
.home-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 1099;
}
body.home-nav-open .home-nav-backdrop { display: block; }

@media (max-width: 640px) {
  /* Compact the home/pricing topbar so 4 elements stop fighting for 390px.
     Burger sits flush right; the inline "Sign in / Go to app" link moves
     into the burger sheet so it doesn't compete for horizontal space. */
  nav.home-nav {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  nav.home-nav .brand-banner-inline { height: 32px; gap: 8px; flex-shrink: 1; min-width: 0; }
  nav.home-nav .brand-banner-inline img { height: 32px; }
  nav.home-nav .brand-banner-wordmark {
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  nav.home-nav .home-nav-actions { gap: 6px; flex-shrink: 0; }
  nav.home-nav .home-link-btn { display: none; }
  nav.home-nav .home-cta-btn {
    padding: 8px 12px;
    font-size: 12.5px;
    white-space: nowrap;
    height: 36px;
  }
  .home-nav-burger {
    display: inline-flex;
    margin-left: 0;
  }
  /* Override lx-theme-home.css :1289 (display:none) so the links can show
     as a slide-up sheet. nav.home-nav > .home-nav-links specificity (0,1,1)
     beats every plain .home-nav-links rule from any other layer. */
  nav.home-nav > .home-nav-links {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    margin: 0 !important;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px calc(20px + var(--safe-bottom));
    background: var(--surface-1);
    border-radius: 18px 18px 0 0;
    border-top: 1px solid var(--border);
    z-index: 1100;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
    box-shadow: 0 -16px 40px -12px rgba(0, 0, 0, 0.7);
    max-height: 80vh;
    overflow-y: auto;
  }
  nav.home-nav > .home-nav-links::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border-2);
    border-radius: 999px;
    margin: 0 auto 10px;
    flex-shrink: 0;
  }
  body.home-nav-open nav.home-nav > .home-nav-links {
    transform: translateY(0) !important;
  }
  nav.home-nav > .home-nav-links a {
    padding: 14px 14px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    min-height: var(--touch-pref);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  nav.home-nav > .home-nav-links a:active { background: var(--surface-2); }
}

/* Very tight phones: ditch the inline CTA too, the burger sheet has all the
   important destinations anyway. Logo + burger only. */
@media (max-width: 380px) {
  nav.home-nav .home-cta-btn { display: none; }
  nav.home-nav .brand-banner-wordmark { display: none; }
}

/* ── Pricing (pricing.html + lx-theme-pricing.css) ─────────────────────── */
@media (max-width: 820px) {
  .calc-body { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .pp-roi { grid-template-columns: 1fr !important; }
  .ugc-grid { grid-template-columns: 1fr !important; }
  .calc-presets { grid-template-columns: 1fr !important; }
  .ugc-metrics { grid-template-columns: repeat(2, 1fr) !important; }
  .ugc-compare {
    flex-direction: column;
    gap: 14px;
  }
  .ugc-arrow {
    transform: rotate(90deg);
    margin: 0 auto;
  }
  .single-plan { padding: 24px 20px; }
  .single-plan-price .amount { font-size: 44px; }
  .pp-faq-head {
    padding: 16px 18px;
    min-height: var(--touch-pref);
  }
  /* Home + pricing hero headlines: clamp's 48px floor is huge on 390px
     screens. Anchor the H1 to a sane phone size so "Pay for output." stops
     spilling past the viewport. */
  .home-h1 {
    font-size: clamp(30px, 8.5vw, 44px) !important;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
  .home-sub,
  .home-sub.center {
    font-size: 14.5px;
    line-height: 1.55;
  }
  .home-section {
    padding: 48px 16px !important;
  }
  /* Subscription-required notice is rendered with inline styles
     (pricing.html:58-70). Inline-style specificity is (1,0,0) so we need
     !important to override the flex layout that traps long text. */
  #need-subscription-notice {
    margin-left: 14px !important;
    margin-right: 14px !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
  }
  #need-subscription-notice > svg {
    margin-top: 2px;
  }
  #need-subscription-notice > span {
    min-width: 0;
    flex: 1 1 auto;
    word-break: break-word;
  }
}

/* ── Auth (auth.css) ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.auth {
    padding: calc(28px + var(--safe-top)) 14px calc(28px + var(--safe-bottom));
  }
  .auth-card { padding: 26px 22px 22px; }
  /* Touch-min height already in the global touch layer above; here we make
     sure the field padding gives a comfortable 48px tap target */
  .auth-card input[type="email"],
  .auth-card input[type="password"],
  .auth-card input[type="text"] {
    min-height: var(--touch-min);
    padding: 13px 14px;
  }
  .auth-actions,
  .auth-card .checkbox-row { gap: 12px; }
}

/* ── Account (settings.css) ────────────────────────────────────────────── */
@media (max-width: 820px) {
  .set-shell-v2 {
    padding: 18px 16px calc(60px + var(--safe-bottom));
  }
  .set-tabs {
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .set-tabs::-webkit-scrollbar { display: none; }
  .set-nav-item {
    white-space: nowrap;
    flex-shrink: 0;
    min-height: var(--touch-min);
  }
  .set-card { padding: 18px 16px; }
  .set-row {
    padding: 14px 0;
    flex-wrap: wrap;
    gap: 8px;
  }
  .set-table { font-size: 12.5px; }
  .set-table th,
  .set-table td { padding: 10px 12px; }
}
@media (max-width: 480px) {
  .set-stat-grid { grid-template-columns: 1fr !important; }
  .set-stat {
    border-right: none !important;
    border-bottom: 1px solid var(--ink-3);
  }
  .set-stat:last-child { border-bottom: none; }
}

/* ── Admin (admin.css) ─────────────────────────────────────────────────── */
@media (max-width: 820px) {
  body.admin > main {
    padding: 18px 14px calc(40px + var(--safe-bottom));
  }
  .admin-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tab {
    white-space: nowrap;
    min-height: var(--touch-min);
    padding: 12px 14px;
    flex-shrink: 0;
  }
  .admin-table { font-size: 12px; }
  .admin-table th,
  .admin-table td { padding: 8px 10px; }
  .admin-toolbar { gap: 8px; flex-wrap: wrap; }
  .admin-input,
  .admin-select,
  .admin-btn {
    min-height: var(--touch-min);
    /* 16px font-size already in global touch layer for inputs/selects */
  }
  .admin-h { font-size: 22px; }
  .runtime-grid,
  .http-tables,
  .http-top {
    grid-template-columns: 1fr !important;
  }
  .server-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .kpi-card { padding: 12px 14px; }
  .kpi-value { font-size: 20px; }
  /* Tables in admin allow horizontal scroll instead of being rewritten */
  .admin-table-wrap,
  .runtime-ports { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
  .server-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Reduced motion respect — kill all sheet/slide animations ─────────── */
@media (prefers-reduced-motion: reduce) {
  .lx-sidebar,
  .lx-brand-modal-card,
  .lx-vfm-modal-panel,
  .tool-form-accordion > summary .tfa-chevron,
  .lxm-chip-wrap[open] .lxm-chip-menu,
  .home-nav-links,
  .lx-nav-item:active,
  .lxm-btn:active,
  .lx-cta-pill:active {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}