/* ═══════════════════════════════════════════════════════════════════ responsive.css — PimpstarAI mobile + tablet adaptation Two tiers: ≤820px (tablet/large phone) · ≤480px (phone) Loaded last so it wins over base layout rules. ═══════════════════════════════════════════════════════════════════ */ /* ─────────── GLOBAL OVERFLOW GUARD ─────────── Horizontal scroll on a phone makes Safari zoom out (everything looks huge). Clamp the page and every top-level container to the viewport width, and stop any child from forcing the body wider than the screen. */ @media (max-width: 820px) { /* clip horizontal overflow WITHOUT breaking position:sticky on the header. overflow-x:hidden on turns it into a scroll container and un-sticks descendants — so clamp width instead and let stray overflow be caught by the containers below. */ html { overflow-x: hidden; } body { max-width: 100%; margin: 0; overflow-x: clip; } /* clip doesn't create a scroll container */ /* keep the top header pinned while scrolling on mobile */ .ps-header { position: sticky; top: 0; z-index: 60; } img, video, canvas, svg { max-width: 100%; height: auto; } /* elements that must never exceed the viewport regardless of inner content */ .ps-shell, .ps-app, .ps-view, .ps-grid, .ps-controls, .ps-hero, .ps-header, .chat-inner, .chat-messages, .chat-msg, .bubble, .psc-main, .psc-row, .psc-shell, .rk-wrap, .ps-credits-top, .ps-plan-grid, .ps-model-list, .ps-profile-card, .ps-detail, .ps-studio-split, pre, code, table { max-width: 100%; box-sizing: border-box; } /* long unbroken strings (URLs, JSON) shouldn't push width */ .bubble, .chat-msg, .ps-model-row, .ps-led, .psc-submodel { overflow-wrap: anywhere; word-break: break-word; } } /* ─────────── TABLET & PHONE (≤ 820px) ─────────── */ @media (max-width: 820px) { /* header: tighter, hamburger visible */ .ps-header { padding: 12px 14px; gap: 10px; } .ps-navtoggle { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 20px; flex-shrink: 0; } .ps-tagline { display: none; } /* save room */ .ps-logo { font-size: 18px; flex-shrink: 0; } .ps-spacer { flex: 1; min-width: 0; } /* account chip → compact pill that never overflows the header edge */ .ps-auth-btn { flex-shrink: 0; max-width: 42vw; padding: 7px 13px; border-radius: 999px; gap: 6px; font-size: 12.5px; font-weight: 600; background: rgba(var(--brand-rgb), .14); border: 1px solid rgba(var(--brand-rgb), .4); color: var(--text); overflow: hidden; white-space: nowrap; } .ps-auth-btn { text-overflow: ellipsis; } .ps-auth-dot { width: 7px; height: 7px; flex-shrink: 0; } /* nav → off-canvas drawer that slides in from the left */ .ps-shell { display: block; } .ps-nav { position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 84vw); z-index: 120; flex-basis: auto; transform: translateX(-100%); transition: transform .26s cubic-bezier(.2,.9,.3,1); overflow-y: auto; padding-top: 18px; background: var(--panel, #150d1e); border-right: 1px solid var(--border2); box-shadow: 20px 0 60px rgba(0,0,0,.6); } .ps-nav.open { transform: translateX(0); } body.nav-rail .ps-nav { flex-basis: auto; width: min(280px,84vw); padding-left: 0; padding-right: 0; } /* disable desktop rail on mobile */ .ps-navscrim { display: none; } .ps-navscrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(4,0,8,.6); backdrop-filter: blur(2px); } .ps-app { flex: 1; min-width: 0; width: 100%; } /* browse controls stack */ .ps-controls { flex-wrap: wrap; gap: 8px; } .ps-search { flex: 1 1 100%; order: -1; } .ps-ctog { flex-wrap: wrap; } /* grids: fewer columns, comfy cards */ .ps-grid, #grid, .ps-draftgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; padding: 14px; } /* horizontal shelves: cards sized to show ~1.6 per screen, portrait */ .ps-shelf-row .ps-card { flex: 0 0 44vw; } .ps-shelf-head { padding: 0 14px 10px; } .ps-shelf-row { padding: 6px 14px 16px; gap: 12px; } /* card image: taller portrait so the whole character shows, less crop */ .ps-card-img { aspect-ratio: 3 / 4.4; } .ps-card-name { font-size: 15px; } .ps-card-body { padding: 8px 11px 11px; } .ps-card-tagline { font-size: 11.5px; -webkit-line-clamp: 2; min-height: 0; } /* hub / discover strips fit the phone — portrait cards on a horizontal rail */ .hub-scroller, .hub-creators { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 12px; padding: 4px 14px 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .hub-card { flex: 0 0 42vw; width: 42vw; max-width: 220px; } .hub-card-img { aspect-ratio: 3 / 4.4; border-radius: 14px; overflow: hidden; } .hub-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .hub-creator { flex: 0 0 38vw; } .hub-resume { flex: 0 0 min(86vw, 340px); } .ps-discover-art { flex-basis: 100%; max-width: 100%; } /* detail overlay: single column, scrollable */ .ps-detail { grid-template-columns: 1fr !important; padding: 16px; } .ps-detail-left { max-width: 320px; margin: 0 auto; } .ps-two { grid-template-columns: 1fr !important; } /* hero → asymmetric stacks: the lead on top, the two minis in a row below */ .ps-hero { grid-template-columns: 1fr; gap: 12px; min-height: 0; padding: 12px 14px; } .ps-hero-lead { min-height: 250px; } .ps-hero-in { padding: 0 18px; } .ps-hero-copy { max-width: 100%; } .ps-hero-name { font-size: 26px; line-height: 1.1; } .ps-hero-tagline { font-size: 13px; } .ps-hero-meta { gap: 6px; overflow: hidden; max-height: 26px; } /* one row of tags */ .ps-hero-actions { margin-top: 14px; gap: 10px; } .ps-hero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; } .ps-hero-mini { min-height: 118px; } /* ── CHAT ── */ /* Phone: use the PORTRAIT thumbnail as the scene backdrop. Published backgrounds are wide, so on a tall screen they crop to a meaningless middle band — the portrait fills a phone properly. Both URLs are set as custom properties by pimpstarai-chat.js. */ .psc-bg { background-image: var(--bg-tall, var(--bg-wide)); background-position: center top; } /* status strip: keep it a slim, single scrollable row so it never eats the screen. The mood/where/time/bond pills scroll sideways instead of wrapping into several tall rows, and the expandable detail is height-capped. */ .psc-statusbar-toggle { padding: 7px 14px; } .psc-statusbar-compact { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; padding: 0 14px 7px; gap: 10px; } .psc-statusbar-compact::-webkit-scrollbar { display: none; } .psc-statusbar-compact > * { flex-shrink: 0; } /* pills keep their size, row scrolls */ .psc-statusbar-body { max-height: 30vh; overflow-y: auto; padding: 2px 14px 10px; } #pscCastPills { padding: 0 14px 8px; } /* side info drawer: a bigger portrait — there's width to spare in the drawer and the character art is the main thing people open the panel to see */ /* full portrait, no crop: the art is generated at 768x1280 (3:5) */ .psc-info-port { aspect-ratio: 768 / 1280; border-radius: 18px; margin-bottom: 16px; } .psc-info-port img { object-position: center; } .psc-root { position: fixed; inset: 0; height: 100dvh; } /* dvh shrinks with the keyboard */ .chat-header { padding: 10px 12px; gap: 8px; } .chat-char-name { font-size: 15px; } .chat-char-avatar { width: 34px; height: 34px; } .chat-inner { padding: 12px 13px 18px; max-width: 100%; } .chat-messages { gap: 12px; } /* bot messages use the full column width and read cleanly — no left-hugging or avatar offset squeezing the prose into a narrow off-centre band */ .chat-msg { max-width: 100%; gap: 8px; } .chat-msg.bot { flex-direction: column; } .chat-msg.bot .chat-msg-ava { display: none; } .chat-msg.user { max-width: 88%; } /* user bubbles stay right-aligned */ .chat-msg-ava { width: 28px; height: 28px; margin-top: 0; } .chat-msg-who { font-size: 11px; margin: 0 0 3px; } /* compact transcript so more of the opening fits on a phone */ .bubble { padding: 8px 11px; font-size: 13px; line-height: 1.42; } .bubble p, .msg-action, .msg-dialogue, .msg-thought, .msg-whisper { font-size: inherit; line-height: inherit; margin: 0 0 .4em; } /* bot replies span the column; keep consecutive messages separate without the old 20px gap eating the viewport */ .chat-msg.bot { margin-bottom: 2px; } /* keep prose readable but never oversized on a phone, even if the reading slider was set large — clamp the messages font size DOWN, not up */ #pscRoot { --r-fs: 13px; --r-lh: 1.42; } #pscRoot .chat-messages, #pscRoot .chat-body, #pscRoot .chat-inner { font-size: 13px; line-height: 1.42; } #pscRoot .bubble { font-size: 13px; line-height: 1.42; padding: 8px 11px; } .chat-stage { padding: 8px 2px 6px; } .chat-stage-intro { font-size: 13px; line-height: 1.4; padding: 8px 10px; max-height: 22vh; overflow: auto; } .chat-divider { margin: 8px 0; font-size: 11px; letter-spacing: .14em; } .chat-stage-img-wrap { max-height: 40vh; margin: 0 auto; } /* scene image centered */ .chat-stage-title { font-size: 17px; margin: 0 0 6px; line-height: 1.25; } /* composer: keep it compact and on tidy rows, never sprawling */ .chat-input-wrap { padding: 6px 10px calc(7px + env(safe-area-inset-bottom, 0px)); } .chat-dock { flex-wrap: nowrap; gap: 6px; margin-bottom: 5px; max-width: 100%; align-items: center; } .psc-persona-chip { flex-shrink: 0; padding: 5px 11px 5px 8px; font-size: 12px; } .psc-dock-tools { flex-wrap: nowrap; gap: 5px; flex: 1; min-width: 0; justify-content: flex-end; } /* the engine chip is the long one — let it shrink & truncate instead of wrapping the row */ .psc-dock-engine { flex: 0 1 auto; min-width: 0; font-size: 10px; padding: 5px 9px; overflow: hidden; } .psc-dock-engine span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .psc-dock-btn { width: 34px; height: 34px; font-size: 15px; flex-shrink: 0; } .chat-input-row { max-width: 100%; padding: 4px 6px 4px 12px; border-radius: 13px; gap: 7px; } /* keep font at 16px (stops iOS zoom); trim the rest so the box is compact */ .chat-textarea { font-size: 16px; line-height: 1.35; padding: 4px 0; max-height: 78px; } .chat-send { width: 40px; height: 40px; font-size: 15px; border-radius: 11px; flex-shrink: 0; } .chat-shot { width: 34px; height: 34px; flex-shrink: 0; } .chat-hint { display: none; } /* reclaim a row — Enter/Shift+Enter hint is desktop-only guidance */ /* engine picker: single column */ .psc-enginebox { width: 94vw; max-width: 94vw; } .psc-engine-grid { grid-template-columns: 1fr; } .psc-submodels-list { max-height: 40vh; } /* settings / persona modal fills more of the screen */ .psc-box { width: 94vw; max-width: 94vw; max-height: 88vh; } /* rankings podium: keep 3 up top but shrink */ .rk-wrap { padding: 16px 12px 48px; } .rk-podium { gap: 8px; } .rk-podium-card { padding: 26px 8px 14px; } .rk-row-strip { display: none; } /* account Plans & Credits */ .ps-credits-top { flex-direction: column; align-items: stretch; text-align: center; gap: 14px; } .ps-plan-grid { grid-template-columns: 1fr 1fr; } .ps-profile-card { flex-wrap: wrap; } .ps-profile-actions { width: 100%; display: flex; gap: 8px; flex-wrap: wrap; } .ps-profile-actions .ps-btn { flex: 1; } /* studio: single column, preview below form */ .ps-studio-split { grid-template-columns: 1fr !important; } .ps-preview { position: static !important; } .ps-studio-art, .ps-studio-imgs { grid-template-columns: 1fr !important; } /* generic: buttons and taps are finger-sized */ .ps-btn { padding: 11px 16px; } .ps-view { padding-left: 0; padding-right: 0; } } /* ─────────── PHONE (≤ 480px) ─────────── */ @media (max-width: 480px) { .ps-header { padding: 10px 12px; } .ps-logo { font-size: 16px; } /* two-per-row cards on small phones */ .ps-grid, #grid, .ps-draftgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 12px; } .ps-shelf-row .ps-card { flex: 0 0 46vw; } .ps-card-img { aspect-ratio: 3 / 4.4; } /* page headings smaller */ .ps-page-head h1 { font-size: 20px; } /* chat: full-width messages, tighter */ .chat-inner { padding: 12px 12px 18px; } .chat-msg { max-width: 100%; } .chat-msg-ava { width: 26px; height: 26px; } .chat-messages { gap: 10px; } .bubble { padding: 7px 10px; font-size: 13px; line-height: 1.4; } #pscRoot .chat-messages, #pscRoot .bubble { font-size: 13px; line-height: 1.4; } .chat-stage-img-wrap { max-height: 32vh; } .chat-stage-title { font-size: 16px; } .chat-stage-intro { max-height: 20vh; padding: 7px 9px; } /* rankings: podium stacks vertically on the tiniest screens */ .rk-podium { grid-template-columns: 1fr; gap: 10px; } .rk-stand { flex-direction: row; align-items: center; } .rk-podium-card { flex: 1; flex-direction: row; gap: 10px; text-align: left; align-items: center; border-radius: 14px; padding: 12px 14px; } .rk-plinth { display: none; } /* no 3D blocks when stacked */ .rk-podium-crown { position: static; } .rk-podium-avwrap { margin-bottom: 0; } .rk-podium-av, .place-1 .rk-podium-av { width: 52px; height: 52px; } .rk-strip { justify-content: flex-start; } /* plans: single column on phone */ .ps-plan-grid { grid-template-columns: 1fr; } /* engine cards a touch tighter */ .psc-engcard { padding: 12px; } /* the account credit number shouldn't overflow */ .ps-credits-num { font-size: 26px; } /* forms: full-width inputs, no side-by-side */ .ps-form-row { grid-template-columns: 1fr !important; } /* footer minimal */ .ps-footer { padding: 16px 12px; font-size: 11px; } } /* ─────────── touch niceties (any coarse pointer) ─────────── */ @media (pointer: coarse) { /* comfortable minimum tap size on interactive chips/buttons */ .ps-nav-item, .psc-dock-btn, .chat-send, .ps-btn, .rk-tab, .ps-profile-tab { min-height: 40px; } /* remove hover-only reveals that never fire on touch */ .ps-peek { display: none; } /* iOS/Safari ZOOMS a focused field whose font is under 16px. The ≤820px rule below already sets 16px, but a large phone or tablet reporting 821px+ would miss it and zoom on focus — so pin the composer to 16px on EVERY touch device here, regardless of width. #pscRoot scope beats the base 14.5px. */ #pscRoot .chat-textarea, #pscRoot #pscInput { font-size: 16px; } }