/* ========================================================================== AUTOVERSE AI — av_mobile.css -------------------------------------------------------------------------- Mobile-first pass, loaded LAST on every page that includes it so it wins the cascade on same-specificity selectors without !important wars. Scope: this file is shared across nl_search.html, account_settings.html and login.html. Each page's carries a `data-page` attribute ("search" | "settings" | "login") — every rule below that could collide with another page's markup (.card, .row, generic layout classes) is scoped with that attribute. Rules that touch AUTOVERSE-specific class names (.tree-sku-row, .av-ev, .dc-modal, …) are unambiguous and left unscoped. BREAKPOINT SCALE (mobile-first — write the base rule for the phone, then ADD at larger widths; never write the desktop rule and subtract): base 320px – 479px smallest supported width ≥480px large phone ≥768px tablet portrait ≥1024px tablet landscape / small laptop ≥1280px desktop Plus one shape query, independent of the scale above: orientation:landscape and max-height:500px phone on its side — almost no vertical room, the composer/sheets must not eat the screen. Existing stylesheets already carry a lot of max-width mobile patchwork (768/900/760/640/420 …) from earlier passes. Those are left in place per the no-regression rule; this file adds the mobile-first layer on top and only overrides a selector where something is still genuinely broken at 320–767px (iOS zoom-on-focus, missing safe-area, a centred dialog that should be a sheet, a touch target under 44px, off-canvas scroll bleed). ========================================================================== */ /* ========================================================================== 1. SEARCH PAGE (nl_search.html) — data-page="search" ========================================================================== */ /* ---- 1.1 Header: clear the notch, keep brand/menu/cart, drop subtitle ---- */ [data-page="search"] header#appHeader { padding-top: max(12px, env(safe-area-inset-top, 0px)); height: calc(var(--header-h, 60px) + env(safe-area-inset-top, 0px)); } @media (max-width: 479px) { [data-page="search"] .brand-sub { display: none; } [data-page="search"] .brand-name { font-size: 14px; } } /* ---- 1.2 Off-canvas sidebar drawer: full-height, proper overlay dismiss -- The drawer mechanics (toggleSidebar/closeSidebar, #sidebar.open, #sidebarOverlay.open) already exist in nl_search.html — this only tunes how it *looks* at phone widths, plus the safe-area at its edges. */ @media (max-width: 767px) { [data-page="search"] .sidebar { width: 86vw; max-width: 320px; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; } [data-page="search"] .sidebar-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } /* Full-bleed on the smallest phones — 82-86vw of a 320px screen still leaves an oddly narrow drawer; give it the whole width there. */ } @media (max-width: 359px) { [data-page="search"] .sidebar { width: 100vw; max-width: 100vw; } } /* ---- 1.3 Suggestion rail bottom sheet: drag handle + safe-area + dvh ---- */ @media (max-width: 767px) { [data-page="search"] .suggest-rail { max-height: 75vh; max-height: 75dvh; padding: 22px 16px calc(20px + env(safe-area-inset-bottom, 0px)); } [data-page="search"] .suggest-rail::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 3px; background: var(--border-strong); } } /* ---- 1.4 Availability cart dialog (.av-cart) → bottom sheet on phones -- Desktop: centred dialog (unchanged). Phone: full-width sheet anchored to the bottom, rounded top corners, internal scroll, safe-area padding. */ @media (max-width: 640px) { .av-cart-backdrop { align-items: flex-end; padding: 0; } .av-cart { position: relative; width: 100%; max-width: 100%; max-height: 90vh; max-height: 90dvh; border-radius: 18px 18px 0 0; margin: 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .av-cart-backdrop.open .av-cart { transform: translateY(0) scale(1); } .av-cart::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 3px; background: var(--border-strong, #cbd5e1); } .av-cart-head { padding-top: 20px; } .av-cart-x { min-width: 40px; min-height: 40px; } } /* ---- 1.5 "Why this part?" evidence sheet (.av-ev) — drag handle + dvh --- */ @media (max-width: 560px) { .av-ev { height: 88vh; height: 88dvh; padding-top: 6px; } .av-ev::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 3px; background: var(--border-strong); } .av-ev-body { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); } } /* ---- 1.6 Language picker (.av-lang-sheet) → bottom sheet on phones ---- Base implementation (av_theme_fixes.css) centres it as a modal at every width. On a phone that's a small floating card with a lot of dead backdrop above/below it; a sheet is easier to reach and dismiss. */ @media (max-width: 640px) { .av-lang-panel { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; width: 100%; max-width: 100%; max-height: 80vh; max-height: 80dvh; border-radius: 18px 18px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px)); } .av-lang-panel::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 3px; background: var(--border-strong); } .av-lang-close { min-width: 40px; min-height: 40px; } .av-lang-option { min-height: 44px; } } /* ---- 1.7 Composer: no iOS zoom, safe-area, landscape shrink ----------- */ [data-page="search"] .composer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } @media (max-width: 767px) { [data-page="search"] .composer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } } /* iOS Safari zooms the whole page on focus of any text input under 16px. The base design uses 14.5px for density; bump only the live input. */ [data-page="search"] .composer textarea#q { font-size: 16px; } [data-page="search"] .sidebar-search-input { font-size: 16px; } /* Send / mic already 40px — round up to the 44px comfortable target on touch without changing desktop's tighter, denser look. */ @media (max-width: 767px) { [data-page="search"] .composer button.send-btn, [data-page="search"] .composer button.mic-btn, [data-page="search"] #uploadBtn { width: 44px; height: 44px; } } /* Phone held sideways: composer + open sheets must not eat the screen. */ @media (orientation: landscape) and (max-height: 500px) { [data-page="search"] .composer { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); } [data-page="search"] .composer textarea#q { max-height: 72px; } [data-page="search"] .suggest-rail, .av-cart, .av-ev { max-height: 92vh; max-height: 92dvh; } } /* ---- 1.8 SKU row: readable two-line card on a phone, same data -------- */ @media (max-width: 479px) { .tree-sku-row { align-items: flex-start; padding: 10px 6px; gap: 8px; } /* Name + badges wrap freely instead of clipping/overlapping. */ .tree-sku-name { white-space: normal; word-break: break-word; } .tree-sku-meta { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } /* Checkbox hit area: nl_search.html forces `* { box-sizing: border-box }` globally AND pins .tree-sku-check's width/height at 22px !important (~line 731), so padding cannot grow the box (border-box folds padding back into that fixed 22px) — it has to be a width/height override, matched in specificity and !important to actually win the tie, same precedent as the documented .tree-sku-stock override two rules above it in that file. The inner 18px checkbox dot (.sku-avail-checkbox, untouched here) stays the same visual size, just centred in a larger tappable box; a negative margin claims the extra room back so it doesn't push sibling row content over. */ .tree-sku-check { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; margin: -9px -3px -9px -9px; } /* Feedback thumbs + Why? button: same treatment — padding grows the target, the glyph stays the same visual size. */ .av-why-btn { padding: 8px 12px; min-height: 40px; } } /* ---- 1.9 Any wide block scrolls in its own box, never the page -------- */ [data-page="search"] .table-scroll, [data-page="search"] .bubble, [data-page="search"] .kit-rail, [data-page="search"] .av-cart-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---- 1.10 Perf: keep a long conversation cheap to lay out ------------- */ .msg-row { content-visibility: auto; contain-intrinsic-size: 0 140px; } /* Never let a collapsed row hide the thing the user is actively reading — the newest rows and anything mid-interaction stay laid out normally; content-visibility only skips work for rows scrolled well out of view, which is exactly what "auto" already guarantees per spec, so no extra class bookkeeping is needed here. */ /* ========================================================================== 2. SETTINGS PAGE (account_settings.html) — data-page="settings" ========================================================================== */ @media (max-width: 767px) { [data-page="settings"] .shell { padding: 16px 14px 60px; } /* Turn the rail into a proper snapping tab strip (820px query already makes it horizontal-scroll; this adds touch targets + snap + a fade hint so it reads as scrollable rather than clipped). */ [data-page="settings"] nav.rail { gap: 6px; padding: 2px 2px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; } [data-page="settings"] nav.rail button { min-height: 44px; padding: 10px 14px; scroll-snap-align: start; white-space: nowrap; } [data-page="settings"] .row { padding: 12px 14px; } [data-page="settings"] .row .action { width: 100%; } [data-page="settings"] .row .action .btn { width: 100%; text-align: center; } [data-page="settings"] input[type=text], [data-page="settings"] input[type=email], [data-page="settings"] input[type=tel], [data-page="settings"] input[type=password], [data-page="settings"] select { width: 100%; max-width: 100%; font-size: 16px; /* no iOS zoom-on-focus */ min-height: 44px; } [data-page="settings"] button.btn, [data-page="settings"] a.btn { min-height: 44px; } [data-page="settings"] .lang-grid, [data-page="settings"] .grid, [data-page="settings"] .plan-grid { grid-template-columns: 1fr; } } /* ========================================================================== 3. LOGIN PAGE (login.html) — data-page="login" ========================================================================== */ body[data-page="login"] { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); } @media (max-width: 400px) { [data-page="login"] .card { width: calc(100vw - 32px); padding: 30px 22px; } } [data-page="login"] .g-btn { min-height: 46px; } /* ========================================================================== 4. Reduced motion — every new affordance above degrades to a plain snap ========================================================================== */ @media (prefers-reduced-motion: reduce) { [data-page="search"] .sidebar, [data-page="search"] .suggest-rail, .av-cart, .av-ev, .av-lang-panel { transition: none !important; } }