/**
* mobile.css
*
* ALL mobile-specific styles live here.
* Desktop styles stay in your existing CSS — untouched.
*
* Integration: add ONE line to index.html , after your existing CSS:
*
*
* Everything in this file is scoped to [data-view="mobile"] so it
* has zero effect until the toggle fires. Safe to ship immediately.
*
* Integration checklist:
* [ ] Confirm overflow-x:hidden removed from body and #landing (Chrome 146 fix)
* [ ] Confirm #view-toggle button exists in HTML
* [ ] Confirm #bottom-nav exists in HTML
* [ ] Confirm #generate-fab exists in HTML
* [ ] Confirm canvas container has an id (e.g. #viewer-wrap)
* [ ] Wire up tab switching JS (see bottomNav.js)
* [ ] Test on actual iOS Safari and Android Chrome
*/
/* ─── CSS Custom Properties ────────────────────────────────────────────────── */
:root {
/* These are the desktop defaults — unchanged from current behavior */
--sidebar-width: 320px;
--nav-height-bottom: 0px; /* desktop has no bottom nav */
--gallery-cols: repeat(3, 1fr);
--concept-cols: repeat(3, 1fr);
--card-gap: 12px;
}
[data-view="mobile"] {
--sidebar-width: 100%;
--nav-height-bottom: 56px;
--gallery-cols: repeat(2, 1fr);
--concept-cols: repeat(2, 1fr);
/* ── Phase 1: fluid spacing tokens ───────────────────────────────────────
*
* All spacing scales with viewport width via clamp(min, preferred, max).
* The preferred value is chosen so the token equals its design-reference
* value at exactly 390px CSS width (iPhone 14 / 13).
*
* Formula: preferred% = (target_px / 390) * 100
*
* Device reference table (CSS viewport widths):
* 375px — iPhone SE 3rd gen
* 390px — iPhone 13 / 14 ← design reference
* 393px — iPhone 15 / 16
* 430px — iPhone 14+ / 15+ / 16+
* ─────────────────────────────────────────────────────────────────────── */
/* Panel padding — used by #rightPanel; bleed tokens derive from these */
--panel-h-pad: clamp(12px, 4.1vw, 18px); /* 16px @ 390px | 15.4px @ 375px | 17.6px @ 430px */
--panel-v-pad: clamp(8px, 3.08vw, 14px); /* 12px @ 390px | 11.5px @ 375px | 13.2px @ 430px */
/* Card / grid gaps */
--card-gap: clamp(6px, 2.05vw, 10px); /* 8px @ 390px | 7.7px @ 375px | 8.8px @ 430px */
--gap-sm: clamp(3px, 1vw, 6px); /* 3.9px @ 390px — tight internal spacing */
--gap-md: clamp(6px, 2.05vw, 10px); /* 8px @ 390px */
--gap-lg: clamp(10px, 3.08vw, 16px); /* 12px @ 390px */
/* Touch targets — Apple HIG minimum is 44px; never shrink below that */
--touch-min: 44px;
/* Left panel (controls) has tighter padding than the viewer panel */
--left-panel-pad: clamp(6px, 2.05vw, 10px); /* 8px @ 390px */
/* ── Phase 3: fluid font-size tokens ─────────────────────────────────────
*
* Same formula: preferred% = (target_px / 390) * 100
* Reference sizes chosen from the hard-coded rem values found in this file.
* ─────────────────────────────────────────────────────────────────────── */
--fs-xs: clamp(10px, 2.56vw, 12px); /* ~10px @ 390px */
--fs-sm: clamp(11px, 3.08vw, 13px); /* ~12px @ 390px (.75–.78rem) */
--fs-base: clamp(12px, 3.28vw, 14px); /* ~12.8px @ 390px (.8–.82rem) */
--fs-md: clamp(13px, 3.49vw, 15px); /* ~13.6px @ 390px (.85rem) */
--fs-lg: clamp(14px, 3.69vw, 16px); /* ~14.4px @ 390px (.9rem) */
--fs-xl: clamp(15px, 3.9vw, 17px); /* ~15.2px @ 390px (.95rem) */
}
/* ─── View Toggle Button ────────────────────────────────────────────────────── */
#view-toggle {
width: 28px;
height: 28px;
border-radius: 6px;
background: none;
border: none;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
padding: 0;
flex-shrink: 0;
color: rgba(255,255,255,.45);
transition: color .2s, transform 0.15s ease;
font-size: 18px;
line-height: 1;
}
/* Only admin with admin-UI on sees the view toggle */
body[data-admin-ui="on"] #view-toggle { display: flex; }
#view-toggle:hover { color: rgba(255,255,255,.85); transform: scale(1.08); }
#view-toggle:active { transform: scale(0.96); }
/* Icon content — swap based on current view */
[data-view="desktop"] #view-toggle::before { content: "📱"; }
[data-view="mobile"] #view-toggle::before { content: "🖥️"; }
/* On very narrow screens in desktop mode, hide toggle (auto-force mobile instead) */
@media (max-width: 380px) {
[data-view="desktop"] #view-toggle { display: none; }
}
/* ─── Bottom Navigation Bar ─────────────────────────────────────────────────── */
/* Bottom nav removed on user request — hidden in every view. */
#bottom-nav { display: none !important; }
/* ─── Desktop Top Nav — Collapse in mobile view ─────────────────────────────── */
/*
* IMPORTANT: Replace #top-nav with whatever your actual nav selector is.
* Common candidates: header, nav, .top-bar, #main-nav, #header
* Check your HTML and update this selector.
*/
/* Real selectors: top-nav → #appTopbar, credit display → #appCreditBadge.
* .nav-actions has no equivalent — TODO: identify which child wraps the
* right-side button row in #appTopbar and hide that. */
[data-view="mobile"] #appTopbar {
left: var(--gap-sm) !important;
right: var(--gap-sm) !important;
padding: 0 .4rem !important;
min-height: var(--touch-min);
height: var(--touch-min) !important;
gap: .25rem;
/* iOS Safari: isolate the stacking context so backdrop-filter doesn't
* swallow taps on child buttons. Keeps children clickable. */
isolation: isolate;
}
[data-view="mobile"] #appCreditBadge { font-size: 13px; }
/* Every interactive element inside the topbar: guarantee the tap lands.
* iOS Safari drops taps on children of fixed+backdrop-filter ancestors
* unless children create their own stacking layer AND declare touch-action. */
[data-view="mobile"] #appTopbar button,
[data-view="mobile"] #appTopbar .app-topbar-logo,
[data-view="mobile"] #appTopbar #appCreditBadge {
position: relative;
z-index: 1;
touch-action: manipulation;
pointer-events: auto;
-webkit-tap-highlight-color: rgba(255,255,255,.12);
min-height: 36px;
}
/* Left cluster (logo + primary tabs) — let it shrink, but DON'T use overflow-x:auto.
* Scrollable containers steal single-tap gestures on iOS as scroll-start. */
[data-view="mobile"] #appTopbar > div:first-child {
gap: .25rem !important;
min-width: 0;
flex-wrap: nowrap;
}
/* Logo: 42px → 28px on mobile */
[data-view="mobile"] .app-topbar-logo img {
height: 28px !important;
}
/* Hide the 1px decorative separators on mobile — they eat horizontal space */
[data-view="mobile"] #appTopbar > div:first-child > div[style*="width:1px"] {
display: none !important;
}
/* Tab buttons: tighter padding + smaller font */
[data-view="mobile"] .app-topbar-tab {
padding: .25rem .45rem !important;
font-size: var(--fs-sm) !important;
font-weight: 600 !important;
}
/* Mobile: collapse the three nav tabs (Workshop / Models / Concepts) into a single
* dropdown button so the header has room for the logo, credits, and account. The
* dropdown (#mobileNavWrap) is inline-hidden by default for desktop. */
[data-view="mobile"] #atTab-workshop,
[data-view="mobile"] #atTab-gallery,
[data-view="mobile"] #atTab-concepts,
[data-view="mobile"] #atTab-shop {
display: none !important;
}
[data-view="mobile"] #mobileNavWrap { display: inline-flex !important; }
[data-view="desktop"] #mobileNavWrap { display: none !important; }
[data-view="mobile"] #mobileNavBtn {
display: inline-flex;
align-items: center;
gap: .3rem;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
color: rgba(255,255,255,.9);
font-size: var(--fs-base);
font-weight: 600;
padding: .3rem .55rem;
min-height: 34px;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(255,255,255,.18);
white-space: nowrap;
}
[data-view="mobile"] #mobileNavMenu {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 180px;
background: var(--dropdown-bg);
border: 1px solid var(--border2);
border-radius: 12px;
box-shadow: var(--dropdown-shadow);
z-index: 3000;
overflow: hidden;
padding: .35rem 0;
}
[data-view="mobile"] #mobileNavMenu[hidden] { display: none !important; }
[data-view="mobile"] #mobileNavMenu .mnav-row {
display: block;
width: 100%;
padding: .6rem .9rem;
background: none;
border: none;
color: rgba(255,255,255,.88);
font-size: var(--fs-xl);
text-align: left;
cursor: pointer;
min-height: 40px;
touch-action: manipulation;
}
[data-view="mobile"] #mobileNavMenu .mnav-row:hover,
[data-view="mobile"] #mobileNavMenu .mnav-row:active {
background: rgba(255,255,255,.07);
}
[data-view="mobile"] #mobileNavMenu .mnav-divider {
height: 1px;
background: rgba(255,255,255,.08);
margin: .3rem 0;
}
/* v10.195: indented sub-panel rows under Workshop. Smaller font and a left
pad so they read as children of the parent entry above. */
[data-view="mobile"] #mobileNavMenu .mnav-sub {
padding-left: 1.85rem;
font-size: var(--fs-lg);
color: rgba(255,255,255,.72);
min-height: 36px;
}
[data-view="mobile"] #mobileNavMenu .mnav-sub::before {
content: "›";
display: inline-block;
width: 0.7rem;
margin-left: -0.95rem;
color: rgba(255,255,255,.35);
}
/* Hide middle level/XP cluster on mobile — it's not essential and eats flex:1 space */
[data-view="mobile"] .app-topbar-tabs {
display: none !important;
}
/* ─── v10.196: shop mobile layout tightening to match the imagine pattern ──
The current desktop layout has both a left-panel cart summary AND a
center-viewer cart-view; on mobile they stack vertically and the cart
info repeats: header, count, total, "Pick a mini" / "Your cart is empty".
Mobile shop now mirrors imagine: a compact actions panel up top, then a
single cart-view body underneath with no duplicate header. */
/* v10.470: SHOW the cart-view header bar on mobile (was hidden in v10.196).
* User wants the viewer to look like a proper viewer container with a header
* — same pattern as the Imagine panel viewer. Keep it compact.
* v10.473: also surface the Models button (left of My Orders) on mobile. */
[data-view="mobile"] #shopViewHeader {
padding: .45rem .7rem !important;
gap: .5rem !important;
}
[data-view="mobile"] #shopViewTitle {
font-size: var(--fs-md) !important;
}
[data-view="mobile"] #shopViewCount {
font-size: var(--fs-xs) !important;
padding: .12rem .45rem !important;
}
[data-view="mobile"] #shopViewToggleBtn,
[data-view="mobile"] #shopViewModelsBtn {
font-size: var(--fs-xs) !important;
padding: .25rem .5rem !important;
}
/* Reveal the Models button on mobile (inline display:none on the element keeps
* it hidden on desktop). */
[data-view="mobile"] #shopViewModelsBtn {
display: inline-flex !important;
align-items: center !important;
gap: .25rem !important;
}
/* v10.473: free up vertical space above the cart so Add-to-Cart isn't pushed
* below the fold on shorter phones (375×667 and below). Hide the descriptor
* row and the US-shipping notice on mobile — both are nice-to-have copy that
* isn't needed for the purchase flow itself. Tighten the Add-to-Cart button
* padding too. */
[data-view="mobile"] #purchaseShopActions > div:first-child {
display: none !important;
}
[data-view="mobile"] #purchaseModelContent > div[style*="rgba(50,140,220,.08)"] {
display: none !important;
}
[data-view="mobile"] #purchaseBuyBtn .gen-btn-inner {
padding: .55rem .8rem !important;
font-size: var(--fs-md) !important;
}
/* Tighten the 1px separator above Add-to-Cart and any internal spacing of
* #purchaseModelContent. */
[data-view="mobile"] #purchaseModelContent > div[style*="height:1px"] {
margin: .15rem 0 !important;
}
/* Hide the panel-level "Pick a mini to add to your cart" callout — the empty-cart
graphic in shopViewBody is the canonical empty state. */
[data-view="mobile"] #purchaseEmptyState {
display: none !important;
}
/* v10.467: Tighten the shop panel TOP block (descriptor + summary card +
* proceed-to-checkout) so the button sits well within the viewport instead of
* pushing past the fold on shorter phones. */
[data-view="mobile"] #purchaseShopActions {
gap: .35rem !important;
margin-bottom: .35rem !important;
}
/* "Order a physical print of your mini" — smaller on mobile */
[data-view="mobile"] #purchaseShopActions > div:first-child {
font-size: var(--fs-sm) !important;
line-height: 1.25 !important;
}
/* The 1px hairline divider between descriptor and summary card — drop on mobile
* since the summary card already has its own border. */
[data-view="mobile"] #purchaseShopActions > div:nth-child(2) {
display: none !important;
}
/* Tighten the shop panel summary so it reads as a single compact strip */
[data-view="mobile"] #shopPanelSummary {
padding: .4rem .55rem !important;
gap: .18rem !important;
}
[data-view="mobile"] #shopPanelSummary > div:first-child > div:first-child {
font-size: var(--fs-xs);
letter-spacing: .08em;
}
[data-view="mobile"] #shopPanelSummary > div {
font-size: var(--fs-sm) !important;
}
[data-view="mobile"] #shopPanelSummaryCount {
font-size: var(--fs-sm) !important;
margin-top: 0 !important;
}
[data-view="mobile"] #shopPanelSummaryTotal {
font-size: var(--fs-xl) !important;
}
/* Slightly smaller proceed-to-checkout button so it doesn't dominate the panel */
[data-view="mobile"] #shopPanelCheckoutBtn .gen-btn-inner {
padding: .55rem .8rem !important;
font-size: var(--fs-md) !important;
}
/* v10.470: Restore the imagine-viewer-style look in the shop area.
* Pull the entire #shopView container out via negative margins so it reaches
* the panel edges (the parent .panel adds .8rem padding per index.html:2477).
* Inside, the .viewer-panel class gives shopView a canvas-bg (dark nebula in
* arcane-neon theme) and rounded top corners — that's the look the user
* wanted. The shopViewHeader sits at the top with its own bg2 + bottom border.
* shopViewBody is transparent so the canvas-bg shows through edge-to-edge.
* The cart wrapper inside keeps its inline bg2 + border + radius so the cart
* row reads as a discrete card on top of the nebula bg. */
[data-view="mobile"] #purchaseShopActions {
margin-bottom: 0 !important;
}
[data-view="mobile"] #shopView {
margin: calc(-1 * var(--panel-v-pad)) calc(-1 * var(--panel-h-pad)) !important;
border-radius: 0 !important;
}
/* Zero the top panel's bottom padding so no dead space above shopView */
[data-view="mobile"] .bevel-left-panel:has(> #p-purchase) {
padding-bottom: 0 !important;
}
[data-view="mobile"] #shopViewBody {
padding: .55rem .65rem 1rem !important;
background: transparent !important;
}
/* Smaller US-only banner on mobile to keep the empty-state focal */
[data-view="mobile"] #shopViewBody > div:first-child[style*="rgba(50,140,220"] {
margin: .25rem 0 .65rem !important;
padding: .5rem .7rem !important;
font-size: var(--fs-sm) !important;
}
/* Empty-state graphic — smaller padding to fit phone height */
[data-view="mobile"] #shopViewBody > div[style*="text-align:center"][style*="padding:4rem"] {
padding: 1.25rem 1rem !important;
}
/* ─── v10.466: Cart row mobile card layout ──────────────────────────────────
* Desktop uses a 7-column grid:
* minmax(0,1fr) 70px 82px 60px 72px 80px 36px (~400px fixed + product)
* On a 390px iPhone the fixed columns sum to more than the viewport, leaving
* the product cell at zero width — the AI-generated product name (e.g.
* "Female human wizard with robes, staff, large wizard hat...") wraps into a
* tiny vertical strip jammed against the edge. Override the row to a flex
* card layout: image+name on top, size/qty/total in a horizontal row below,
* column header hidden. Hide the redundant Type and Unit columns. */
[data-view="mobile"] [data-cart-row="header"] {
display: none !important;
}
[data-view="mobile"] [data-cart-row="item"] {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: .35rem .5rem !important;
padding: .55rem .65rem !important;
}
/* Child 1: combined image + name flex container — full row, name truncates to 2 lines */
[data-view="mobile"] [data-cart-row="item"] > div:nth-child(1) {
flex: 1 1 100% !important;
min-width: 0 !important;
align-items: flex-start !important;
}
[data-view="mobile"] [data-cart-row="item"] > div:nth-child(1) > div:first-child {
flex-basis: 72px !important;
width: 72px !important;
height: 72px !important;
}
[data-view="mobile"] [data-cart-row="item"] > div:nth-child(1) > div:nth-child(2) {
flex: 1 1 auto !important;
}
[data-view="mobile"] [data-cart-row="item"] > div:nth-child(1) > div:nth-child(2) > div {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: var(--fs-base) !important;
line-height: 1.3 !important;
word-break: break-word !important;
}
/* Child 2 (Type label) — redundant on mobile, hide */
[data-view="mobile"] [data-cart-row="item"] > div:nth-child(2) {
display: none !important;
}
/* Children 3-4 (Size, Qty selects) — inline-flex with prefix label */
[data-view="mobile"] [data-cart-row="item"] > div:nth-child(3),
[data-view="mobile"] [data-cart-row="item"] > div:nth-child(4) {
flex: 0 0 auto !important;
font-size: var(--fs-base) !important;
align-items: center !important;
}
[data-view="mobile"] [data-cart-row="item"] > div:nth-child(3)::before {
content: "Size:";
color: var(--text3);
font-size: var(--fs-xs);
font-weight: 600;
margin-right: .3rem;
text-transform: uppercase;
letter-spacing: .04em;
}
[data-view="mobile"] [data-cart-row="item"] > div:nth-child(4)::before {
content: "Qty:";
color: var(--text3);
font-size: var(--fs-xs);
font-weight: 600;
margin-right: .3rem;
text-transform: uppercase;
letter-spacing: .04em;
}
/* Child 5 (Unit price) — hide on mobile; line total below is the figure that matters */
[data-view="mobile"] [data-cart-row="item"] > div:nth-child(5) {
display: none !important;
}
/* Child 6 (Line total) — push to the right edge of the controls row */
[data-view="mobile"] [data-cart-row="item"] > div:nth-child(6) {
flex: 0 0 auto !important;
margin-left: auto !important;
font-size: var(--fs-lg) !important;
}
/* Child 7 (Remove button) — sit at the end of the controls row */
[data-view="mobile"] [data-cart-row="item"] > div:nth-child(7) {
flex: 0 0 auto !important;
}
/* Right auth bar: tighten gap, hide non-essential icons.
* v10.236: ALL of langBtn / themeBtn / dailyReward / avatar hidden on mobile.
* The hamburger (#appMobileMenuBtn) is the SINGLE menu trigger, opens a unified menu
* that contains Display + Language + Account in one dropdown. */
[data-view="mobile"] #appAuthBar {
gap: .3rem !important;
flex-shrink: 0;
}
[data-view="mobile"] #headerDailyRewardBtn,
[data-view="mobile"] #langBtn,
[data-view="mobile"] #themeBtn,
[data-view="mobile"] #appUserMenu {
display: none !important;
}
/* Sign-in button: shrink to fit mobile */
[data-view="mobile"] #appSignInBtn {
font-size: var(--fs-base) !important;
padding: .25rem .55rem !important;
}
/* ─── 3D Viewer ─────────────────────────────────────────────────────────────── */
/*
* IMPORTANT: Replace #viewer-container, #viewer-canvas, #viewer-sidebar
* with your actual element selectors. Check your HTML.
*/
/* Real selectors: viewer container → #viewerPanel (.viewer-panel),
* canvas → #viewerPanel canvas, sidebar → #rightPanel (TODO verify). */
[data-view="mobile"] #viewerPanel {
display: flex;
flex-direction: column;
margin: calc(-1 * var(--panel-v-pad)) calc(-1 * var(--panel-h-pad)) !important;
border-radius: 0 !important;
}
/* v10.021: DO NOT use a bare `[data-view="mobile"] canvas` selector — it
* catches every canvas in mobile view, including the landing-page model
* preview popup (#modelPreviewCanvas), the Thanos-snap FX canvas, and any
* offscreen compositing canvas. Scope to #viewerPanel canvas only.
*
* v10.485: canvas fills viewer-wrap (height:100%) instead of a hard-coded
* 55svh. The CSS grid gives rightPanel its height (1fr row), viewerPanel
* fills rightPanel via flex:1, viewer-wrap fills viewerPanel, canvas fills
* viewer-wrap. resizeViewer() sets exact px via inline style; since it has
* no !important, inline style wins after the renderer sizes up. */
[data-view="mobile"] #viewerPanel canvas {
width: 100% !important;
height: 100%;
}
[data-view="mobile"] #rightPanel {
width: 100%;
overflow-x: hidden; /* contain child bleed; fixed-pos children unaffected */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: var(--panel-v-pad) var(--panel-h-pad);
max-height: none;
}
/* ─── Render Mode Pills ──────────────────────────────────────────────────────── */
/*
* IMPORTANT: Replace .render-mode-bar, .render-mode-pill
* with your actual selectors.
*/
[data-view="mobile"] .render-mode-bar {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
display: flex;
gap: 6px;
flex-wrap: nowrap;
padding-bottom: 4px;
}
[data-view="mobile"] .render-mode-bar::-webkit-scrollbar { display: none; }
[data-view="mobile"] .render-mode-pill {
flex-shrink: 0;
font-size: 11px;
padding: 4px 10px;
height: 28px;
min-width: max-content;
}
/* ─── Concept Art Grid ──────────────────────────────────────────────────────── */
/*
* IMPORTANT: Replace #concept-grid, .concept-card
* with your actual selectors.
*/
/* Concept grid container in this app is #c3dRes (workshop) and #conceptsGrid
* (concepts page). Both contain dynamically rendered .concept-card divs. */
[data-view="mobile"] #c3dRes,
[data-view="mobile"] #conceptsGrid {
grid-template-columns: var(--concept-cols);
gap: var(--card-gap);
padding: var(--gap-lg);
}
[data-view="mobile"] .concept-card {
border-radius: 10px;
aspect-ratio: 1 / 1;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* Larger tap feedback area */
[data-view="mobile"] .concept-card::after {
content: '';
position: absolute;
inset: -4px;
}
/* ─── Model Gallery ──────────────────────────────────────────────────────────── */
/*
* IMPORTANT: Replace #model-gallery, .model-card, .model-card-info
* with your actual selectors.
*/
/* Hide the "+ New Model" / "+ New Concepts" buttons in the gallery/concepts
* top panels — on mobile users create from Workshop, not from these buttons. */
[data-view="mobile"] #p-gallery .gen-btn,
[data-view="mobile"] #p-concepts .gen-btn {
display: none !important;
}
/* Real selector: model gallery → #ggrid (class .ggrid) */
[data-view="mobile"] #ggrid {
grid-template-columns: var(--gallery-cols);
gap: var(--card-gap);
padding: var(--gap-lg);
}
[data-view="mobile"] .model-card {
-webkit-tap-highlight-color: transparent;
}
/* On mobile, card info is always visible — no hover state */
[data-view="mobile"] .model-card-info {
opacity: 1 !important;
transform: none !important;
pointer-events: auto;
}
/* Touch-friendly delete button — bigger tap target */
[data-view="mobile"] .model-card .delete-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
/* ─── Floating Action Button (Generate) — retired v9.961 ──────────────────────
* The floating Generate FAB was removed on user request; generation is
* triggered from the editor controls instead. Hidden in every view. DOM
* node stays in place in index.html so any code path that still references
* `#generate-fab` does not throw. */
#generate-fab { display: none !important; }
/* ─── Toast Notifications ───────────────────────────────────────────────────── */
/* Desktop uses right:calc(33%-150px) which goes negative on a 390px phone,
* pushing the toast off-screen. Override to top-right position.
*
* Phase 0 fix: the desktop animation is translateX(120%) — slides in from the
* RIGHT. At right:1rem, the off-screen position puts the right edge ~34px past
* the viewport edge, which causes horizontal scroll on real iOS devices. Fix:
* change animation to slide from ABOVE (translateY) so the off-screen rest
* position is above the viewport, never to the right of it. */
[data-view="mobile"] .notif {
right: 1rem !important;
left: auto !important;
max-width: calc(100vw - 2rem) !important;
font-size: var(--fs-lg) !important;
padding: .75rem 1.25rem !important;
transform: translateY(calc(-100% - 5rem)) !important; /* off-screen ABOVE, not to the right */
}
[data-view="mobile"] .notif.show {
transform: translateY(0) !important;
}
[data-view="mobile"] .notif.fade-out {
opacity: 0 !important;
transform: translateY(0) !important;
}
[data-view="mobile"] .notif.replacing {
opacity: 0 !important;
transform: translateY(0) !important;
}
/* ─── Progress Overlay ──────────────────────────────────────────────────────── */
/*
* IMPORTANT: Replace #progress-overlay, .progress-bar-wrap, #progress-cancel
* with your actual selectors.
*/
[data-view="mobile"] #progress-overlay {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 24px;
z-index: 9999;
/* Full screen — covers bottom nav too */
}
[data-view="mobile"] .progress-bar-wrap {
width: 100%;
max-width: 340px;
}
[data-view="mobile"] .progress-label {
font-size: 15px;
margin-bottom: 12px;
}
[data-view="mobile"] .progress-bar {
height: 10px; /* taller bar, easier to read on mobile */
border-radius: 5px;
margin-bottom: 24px;
}
/* Cancel button — thumb-friendly position */
[data-view="mobile"] #progress-cancel {
position: fixed;
bottom: calc(var(--nav-height-bottom) + env(safe-area-inset-bottom, 0px) + 24px);
left: 50%;
transform: translateX(-50%);
min-width: 120px;
height: 44px;
}
/* ─── Prompt Input ──────────────────────────────────────────────────────────── */
/*
* IMPORTANT: Replace #prompt-input, #prompt-wrap
* with your actual selectors.
*/
/* Prevent iOS zoom on input focus (font-size must be >= 16px) */
/* Real selectors: prompt inputs → #c3dPrompt (workshop), #c3dEditPrompt (edit),
* #i3dPrompt (image-to-3d), #dashPrompt (landing). All get the iOS no-zoom fix. */
[data-view="mobile"] #c3dPrompt,
[data-view="mobile"] #c3dEditPrompt,
[data-view="mobile"] #i3dPrompt,
[data-view="mobile"] #dashPrompt {
font-size: max(16px, 1em);
border-radius: 12px;
padding: 12px 14px;
min-height: 48px;
}
/* ─── Variant Viewer ────────────────────────────────────────────────────────── */
/*
* Variant viewer currently uses 3 equal columns.
* On mobile, stack vertically.
*/
[data-view="mobile"] .variant-viewer-grid {
grid-template-columns: 1fr;
gap: 16px;
}
/* ─── Info Badge / Popup ────────────────────────────────────────────────────── */
/*
* _mkIdBadge popups — ensure they don't overflow screen edge on mobile
*/
[data-view="mobile"] .id-badge-popup {
left: 50% !important;
transform: translateX(-50%) !important;
right: auto !important;
max-width: calc(100vw - 32px);
}
/* ─── Modals ────────────────────────────────────────────────────────────────── */
/*
* Modals on mobile: full screen, slide up from bottom.
* Replace .modal-container with your actual modal selector.
*/
[data-view="mobile"] .modal-container {
position: fixed;
inset: 0;
margin: 0;
border-radius: 0;
max-width: 100%;
max-height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Alternatively, bottom-sheet style for smaller modals */
[data-view="mobile"] .modal-container.bottom-sheet {
top: auto;
bottom: 0;
border-radius: 16px 16px 0 0;
max-height: 85vh;
inset: auto 0 0 0;
}
/* ─── Scrollbar hiding on mobile (cosmetic) ─────────────────────────────────── */
[data-view="mobile"] ::-webkit-scrollbar { width: 0; height: 0; }
[data-view="mobile"] { scrollbar-width: none; }
/* ─── Landing Page ──────────────────────────────────────────────────────────── */
/*
* If #landing has overflow-x: hidden — REMOVE IT from your main CSS.
* That's the Chrome 146 position:fixed bug. Don't re-add it here.
*/
[data-view="mobile"] #landing {
padding: 16px;
}
/* ─── Chrome 146 position:fixed fix (mobile-only override) ──────────────────── */
/* The main CSS sets overflow-x:hidden on body and #landing — that breaks
* position:fixed on Chrome 146+. `clip` is the correct fix: it clips visual
* overflow without creating a new scroll container, so position:fixed children
* remain viewport-relative while any overflowing element cannot widen the page.
* (Safari 15.4+ / Chrome 90+ / Firefox 81+) */
[data-view="mobile"] body,
[data-view="mobile"] #landing {
overflow-x: clip;
}
/* ═══════════════════════════════════════════════════════════════════════════
* DEVICE PREVIEW (desktop-only overlay)
*
* Professional iframe-based device preview. Matches the pattern used by
* Chrome DevTools device mode, Responsively App, Polypane, Sizzy, and
* react-responsive-iframe-viewer: centered fixed-size phone frame on a
* dark backdrop, controls outside the frame.
*
* z-index stack:
* .app-topbar (200) ← toggle button lives here, ALWAYS visible on top
* #device-preview-backdrop (150)
* everything else (< 150)
*
* NOT scoped to [data-view] — this overlay exists in desktop mode. It is
* only visible when #device-preview-backdrop is not [hidden].
* ═══════════════════════════════════════════════════════════════════════════ */
#device-preview-backdrop {
position: fixed;
inset: 0;
z-index: 150;
background: radial-gradient(ellipse at center, #0d0d10 0%, #000 80%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px 40px; /* leave room under the floating topbar */
box-sizing: border-box;
animation: devicePreviewFadeIn .18s ease-out;
}
#device-preview-backdrop[hidden] { display: none; }
@keyframes devicePreviewFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.device-preview-label {
color: rgba(255,255,255,.55);
font-size: 12px;
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
margin-bottom: 14px;
user-select: none;
display: flex;
align-items: center;
gap: 10px;
}
.device-preview-label .dp-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 8px rgba(74,222,128,.6);
}
.device-preview-label .dp-hint {
color: rgba(255,255,255,.35);
font-size: 11px;
text-transform: none;
letter-spacing: 0;
}
.device-preview-label .dp-hint kbd {
display: inline-block;
padding: 1px 6px;
border-radius: 4px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.15);
font-family: inherit;
font-size: 10px;
color: rgba(255,255,255,.7);
}
.dp-presets {
display: flex;
gap: 4px;
}
.dp-preset {
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.12);
border-radius: 5px;
color: rgba(255,255,255,.5);
cursor: pointer;
font: 500 10px/1 inherit;
letter-spacing: .03em;
padding: 4px 8px;
text-transform: uppercase;
transition: background .1s, color .1s, border-color .1s;
}
.dp-preset:hover {
background: rgba(255,255,255,.13);
color: rgba(255,255,255,.8);
border-color: rgba(255,255,255,.25);
}
.dp-preset.dp-preset-active {
background: rgba(74,222,128,.15);
border-color: rgba(74,222,128,.4);
color: #4ade80;
}
.dp-dims {
color: rgba(255,255,255,.3);
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.device-preview-frame {
position: relative;
width: 390px;
height: min(844px, calc(100vh - 160px));
background: #1a1a1a;
border-radius: 48px;
padding: 10px;
box-shadow:
0 0 0 1.5px rgba(255,255,255,.08),
0 30px 80px rgba(0,0,0,.8),
0 8px 24px rgba(0,0,0,.6);
box-sizing: content-box;
flex-shrink: 0;
}
/* Subtle notch on top bezel for polish */
.device-preview-frame::before {
content: "";
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 110px;
height: 22px;
background: #000;
border-radius: 0 0 14px 14px;
z-index: 2;
pointer-events: none;
}
#device-preview-iframe {
width: 100%;
height: 100%;
border: 0;
border-radius: 38px;
display: block;
background: #0a0a0a;
}
/* When preview is open, stop parent scroll and dim non-topbar chrome */
html[data-device-preview="on"] {
overflow: hidden;
}
/* On shorter/narrower desktops, scale the frame down proportionally */
@media (max-height: 900px) {
.device-preview-frame {
transform: scale(.92);
transform-origin: center center;
}
}
@media (max-height: 780px) {
.device-preview-frame {
transform: scale(.82);
}
}
@media (max-width: 520px) {
/* If somehow opened on a narrow desktop window, just let the iframe
* fill the available space minus bezel */
.device-preview-frame {
width: calc(100vw - 40px);
max-width: 390px;
}
}
/* ============================================================
* MOBILE APP LAYOUT REDESIGN — stacked instead of side-by-side
* ============================================================
* Desktop: [sidebar | left-panel | viewer | history-panel]
* Mobile: [ sidebar-as-topbar ]
* [ left-panel (condensed) ]
* [ viewer ]
* [ history via dropdown btn]
*
* All rules scoped to [data-view="mobile"] so desktop is untouched.
* Uses existing CSS custom props (--sidebar-width, --nav-height-bottom,
* --viewer-height) — no hardcoded breakpoints.
*/
/* Mobile layout knobs (override the desktop defaults set in index.html) */
[data-view="mobile"] {
--mobile-sidebar-height: 48px;
--mobile-left-panel-max-h: 38vh;
--mobile-history-dropdown-offset: 16px;
}
/* 1. Outer body row (#app > first div): side-by-side → stacked column */
[data-view="mobile"] #app > div[style*="display:flex"] {
flex-direction: column !important;
padding: var(--gap-sm) !important;
gap: var(--gap-sm) !important;
overflow: hidden !important;
}
/* 2. Sidebar hidden on mobile — #appTopbar and #bottom-nav cover navigation.
* The prior "sidebar-as-topbar" conversion conflicted with the fixed
* #appTopbar above it, creating a duplicate header. Primary actions
* (Workshop / Models / Concepts) live in the top bar; secondary actions
* (Create / View / Gallery / Me) live in #bottom-nav. */
[data-view="mobile"] .sidebar.bevel-sidebar {
display: none !important;
}
/* Mobile topbar: hide individual theme / daily-reward / view-toggle / langBtn buttons —
* v10.236: all consolidated into a single hamburger menu (Display + Language + Account). */
[data-view="mobile"] #appTopbar #langBtn,
[data-view="mobile"] #appTopbar #langBtnWrap,
[data-view="mobile"] #appTopbar #themeBtn,
[data-view="mobile"] #appTopbar #headerDailyRewardBtn,
[data-view="mobile"] #appTopbar #view-toggle,
[data-view="mobile"] #appTopbar #themePickerWrap,
[data-view="mobile"] #appTopbar #headerLevelWrap,
[data-view="mobile"] #appTopbar #appUserMenu {
display: none !important;
}
/* Mobile topbar: restore lang/theme wrappers' containing
* so we can hide them. The wrappers are inline-styled so we target the
* buttons' parents generically by id. */
[data-view="mobile"] #appTopbar > div:nth-child(1) {
gap: .35rem !important;
}
[data-view="mobile"] .app-topbar-tab {
padding: .35rem .5rem !important;
font-size: var(--fs-sm) !important;
}
/* Mobile hamburger menu button + dropdown */
[data-view="mobile"] #appMobileMenuBtn {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px;
color: rgba(255,255,255,.85);
cursor: pointer;
padding: 0;
flex-shrink: 0;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(255,255,255,.18);
}
[data-view="desktop"] #appMobileMenuBtn,
[data-view="desktop"] #appMobileMenu { display: none !important; }
[data-view="mobile"] #appMobileMenu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 240px;
background: var(--dropdown-bg);
border: 1px solid var(--border2);
border-radius: 12px;
box-shadow: var(--dropdown-shadow);
z-index: 3000;
overflow: hidden;
padding: .4rem 0;
}
[data-view="mobile"] #appMobileMenu[hidden] { display: none !important; }
[data-view="mobile"] #appMobileMenu .mm-section-label {
padding: .45rem .9rem .25rem;
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: rgba(255,255,255,.4);
}
[data-view="mobile"] #appMobileMenu .mm-row {
display: flex;
align-items: center;
gap: .6rem;
width: 100%;
padding: .6rem .9rem;
background: none;
border: none;
color: rgba(255,255,255,.85);
font-size: var(--fs-lg);
text-align: left;
cursor: pointer;
min-height: 40px;
touch-action: manipulation;
}
[data-view="mobile"] #appMobileMenu .mm-row:hover {
background: rgba(255,255,255,.05);
}
[data-view="mobile"] #appMobileMenu .mm-row .mm-icon {
font-size: 1.1rem;
width: 22px;
text-align: center;
}
[data-view="mobile"] #appMobileMenu .mm-divider {
height: 1px;
background: rgba(255,255,255,.08);
margin: .3rem 0;
}
/* On mobile both #langBtn and #themeBtn are hidden; their dropdowns
* (#langMenu / #themeMenu) open via hamburger rows. Re-position the dropdowns
* under the hamburger button. */
[data-view="mobile"] #langMenu {
position: fixed !important;
top: 56px !important;
right: 8px !important;
left: auto !important;
z-index: 3100 !important;
}
[data-view="mobile"] #themeMenu {
position: fixed !important;
top: 56px !important;
right: 8px !important;
left: auto !important;
max-height: calc(100vh - 72px) !important;
overflow-y: auto !important;
z-index: 3100 !important;
}
/* ─── v10.235: Upgrade / Pricing / Top-up modal — mobile fit ──────────────── */
/* The desktop modal targets max-width:920px (inline) and uses a 4-column grid for
* pricing tiers + topup packs. Both overflow on a 390px viewport. Force a single
* column and a viewport-bound card width so everything fits and scrolls cleanly. */
[data-view="mobile"] #upgradeModal {
padding: 8px !important;
}
[data-view="mobile"] #upgradeModal .upgrade-card {
max-width: calc(100vw - 16px) !important;
width: 100% !important;
max-height: calc(100vh - 16px) !important;
padding: 1rem !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
box-sizing: border-box !important;
}
[data-view="mobile"] #upgradeTabBar {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap !important;
gap: 0 !important;
}
[data-view="mobile"] #upgradeTabBar button {
padding: .5rem .65rem !important;
font-size: var(--fs-base) !important;
flex-shrink: 0;
}
/* Pricing tier cards: 4 → 1 column */
[data-view="mobile"] #pricingCardsGrid,
[data-view="mobile"] .plan-grid {
grid-template-columns: 1fr !important;
gap: .5rem !important;
}
/* Top-up credit packs: 4 → 2 columns (packs are smaller, 2 across reads better) */
[data-view="mobile"] #topupPacksGrid {
grid-template-columns: repeat(2, 1fr) !important;
gap: .5rem !important;
}
/* Membership pane: stack the two side-by-side cards */
[data-view="mobile"] #paneMembership > div:first-child {
flex-direction: column !important;
gap: .6rem !important;
}
[data-view="mobile"] #paneMembership > div:first-child > div {
min-width: 0 !important;
}
/* Usage History table — let it scroll horizontally, smaller font */
[data-view="mobile"] #paneMembership table th,
[data-view="mobile"] #paneMembership table td {
font-size: var(--fs-xs) !important;
padding: .35rem .4rem !important;
}
/* Annual/Monthly toggle + currency dropdown row */
[data-view="mobile"] #paneUpgrade > div:nth-child(2) {
gap: .6rem !important;
}
/* User-menu dropdown — keep within viewport on mobile */
[data-view="mobile"] #appUserDropdown {
min-width: 220px !important;
max-width: calc(100vw - 16px) !important;
right: 0 !important;
}
[data-view="mobile"] #appUserDropdown #dropUserEmail {
max-width: calc(100vw - 100px);
}
/* ─── v10.237: Onboarding modal — give the portrait image room to breathe on mobile ── */
[data-view="mobile"] #mmOnboardingOverlay {
padding: 6px !important;
}
[data-view="mobile"] #mmOnboardingCard {
max-width: calc(100vw - 12px) !important;
max-height: calc(100vh - 12px) !important;
padding: .7rem !important;
gap: .65rem !important;
border-radius: 16px !important;
}
[data-view="mobile"] #mmOnboardingImg {
max-height: 78vh !important;
border-radius: 10px !important;
}
[data-view="mobile"] #mmOnboardingDetailView {
max-height: 75vh !important;
font-size: var(--fs-lg) !important;
line-height: 1.5 !important;
}
[data-view="mobile"] #mmOnboardingGotItBtn {
padding: .75rem 1.6rem !important;
font-size: var(--fs-xl) !important;
}
[data-view="mobile"] #mmOnboardingLearnMoreBtn {
padding: .7rem 1.2rem !important;
font-size: var(--fs-lg) !important;
}
/* 3. app-main + content: single column stack */
[data-view="mobile"] .app-main {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}
[data-view="mobile"] .content {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto 1fr !important;
gap: var(--gap-sm) !important;
overflow: hidden !important;
}
/* 4. Left tool panel: condensed, scrollable, smaller controls */
[data-view="mobile"] .panel.bevel-left-panel {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
max-height: var(--mobile-left-panel-max-h) !important;
overflow-y: auto !important;
padding: var(--left-panel-pad) !important;
}
[data-view="mobile"] .panel.bevel-left-panel button,
[data-view="mobile"] .panel.bevel-left-panel .vbtn {
font-size: var(--fs-xs) !important;
padding: .3rem .5rem !important;
min-height: 30px !important;
}
[data-view="mobile"] .panel.bevel-left-panel input,
[data-view="mobile"] .panel.bevel-left-panel select,
[data-view="mobile"] .panel.bevel-left-panel textarea {
font-size: var(--fs-sm) !important;
padding: .3rem .4rem !important;
}
[data-view="mobile"] .panel.bevel-left-panel .ptitle {
font-size: var(--fs-base) !important;
}
/* 5. History panel — on mobile it behaves like a fourth top-level view
* (Workshop / Models / Concepts / History). Hidden by default; when the
* user picks History from the header dropdown, html gets
* data-mobile-panel="history" which hides the editor's #rightPanel and
* lets the history panel fill the main content area. v9.960. */
[data-view="mobile"] .history-panel.bevel-all,
[data-view="mobile"] #historyPanel {
display: none !important;
}
html[data-view="mobile"][data-mobile-panel="history"] #historyPanel {
display: flex !important;
flex: 1 1 auto !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
min-height: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: auto !important;
}
html[data-view="mobile"][data-mobile-panel="history"] #rightPanel {
display: none !important;
}
/* v10.471: Shop picker bottom-sheet mode. When the user clicks "Browse your
* minis" in the empty-cart state, _shopGoBrowseMinis sets
* data-mobile-panel="shop-picker" and adds .mobile-open to #historyPanel.
* Distinct from the full "history" mode above — here we do NOT hide #rightPanel,
* the shop panel stays visible at the top so the user can see Add to Cart.
* The selector slides up from the bottom as a sheet covering ~55% of the
* screen. A backdrop on ::before catches taps outside the sheet to dismiss. */
html[data-view="mobile"][data-mobile-panel="shop-picker"] #historyPanel {
display: flex !important;
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: 45% !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
border-left: none !important;
border-top: 1px solid var(--border) !important;
border-radius: 16px 16px 0 0 !important;
box-shadow: 0 -10px 32px rgba(0,0,0,.55) !important;
z-index: 1000 !important;
background: var(--history-bg) !important;
animation: shop-picker-slide-up .22s ease-out;
}
@keyframes shop-picker-slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* No backdrop/dim overlay when shop-picker is open — user wants the shop
* panel above the sheet to remain fully visible and undimmed. */
/* 6. Legacy floating History trigger — fully retired in v9.960.
* Replaced by the History row inside #mobileNavMenu. Hidden in every view. */
#historyPanelMobileTrigger { display: none !important; }
/* ─── Phase 3: Device-tier overrides ────────────────────────────────────────
*
* xs = iPhone SE (375px and below). Scale font tokens down slightly so
* the smaller display doesn't feel cramped.
*/
[data-view="mobile"][data-device-tier="xs"] {
--fs-xs: clamp(9px, 2.4vw, 11px);
--fs-sm: clamp(10px, 2.67vw, 12px);
--fs-base: clamp(11px, 2.93vw, 13px);
--fs-md: clamp(12px, 3.2vw, 14px);
--fs-lg: clamp(13px, 3.47vw, 15px);
--fs-xl: clamp(14px, 3.73vw, 16px);
}
/* ─── Mobile popup / modal audit fixes ──────────────────────────────────────
*
* Popups and modals that were designed for desktop viewports need to be
* bounded and scrollable on phone-sized screens so no buttons fall off the
* bottom. Each fix follows the same pattern:
* • Outer wrapper: overflow-y:auto so the backdrop itself can scroll
* • Inner card: max-height:calc(100dvh - Xpx) + overflow-y:auto
* • Padding: reduced so the card fits within the visible area
*/
/* 1. Turnaround orientation-check modal — examples grid uses minmax(110px,1fr)
* which stretches each image to ~150px square, creating 2 tall rows (~300px).
* On phone viewports this pushes buttons off screen. Fix: force all 4 examples
* into one compact row (~67px each) so total card height fits on every phone. */
[data-view="mobile"] #_ocExamples {
grid-template-columns: repeat(4, 1fr) !important;
}
/* 2. Panel info overlays — desktop positions left:40px;width:320px become
* full-bleed (minus 8px gutter each side) on mobile so they can't clip. */
[data-view="mobile"] #polishInfoOverlay,
[data-view="mobile"] #sculptInfoOverlay,
[data-view="mobile"] #purchaseInfoOverlay,
[data-view="mobile"] #imagineInfoOverlay {
left: 8px !important;
right: 8px !important;
width: auto !important;
top: 60px !important;
max-height: calc(100dvh - 80px) !important;
overflow-y: auto !important;
}
/* 3. Preset modal (landing page type/style picker) — inner card has no height
* cap; overflows on short phones (SE 375×667). */
[data-view="mobile"] #presetModal {
align-items: flex-start !important;
overflow-y: auto !important;
padding: .75rem !important;
}
[data-view="mobile"] #presetModal > div {
max-height: calc(100dvh - 1.5rem) !important;
overflow-y: auto !important;
padding: 1.25rem 1rem 1rem !important;
-webkit-overflow-scrolling: touch;
}
/* Compact the 3×2 style-button grid on small screens */
[data-view="mobile"] #presetModal .style-btn {
padding: .4rem .25rem !important;
}
/* 4. Facing-check modal (check side view directions) — position:absolute;inset:0
* so it's bounded by its parent panel, but add overflow safety for the card. */
[data-view="mobile"] #facingCheckModal > div {
max-height: calc(100vh - 2rem) !important;
overflow-y: auto !important;
padding: 1rem 1.1rem !important;
-webkit-overflow-scrolling: touch;
}
/* 5. Terms re-consent modal — inner card has no overflow-y on mobile */
[data-view="mobile"] #termsReconsentModal > div {
max-height: calc(100dvh - 2rem) !important;
overflow-y: auto !important;
padding: 1.25rem !important;
-webkit-overflow-scrolling: touch;
}