inside the sheet, not on . */ .avatar-setup { --as-panel: var(--white, #fff); --as-paper: var(--gray-bg, #f1f0f6); --as-ink: var(--plum, #3d2050); --as-ink-soft: var(--text-muted, #7a7387); --as-line: var(--border, #e7e3ef); --as-accent: var(--accent, #6c4bd8); --as-accent-3: var(--accent-light, #b9a5f0); --as-radius-md: 16px; --as-radius-sm: 11px; --as-shadow-soft: 0 8px 22px -14px rgba(30, 20, 50, 0.26); } .avatar-setup * { box-sizing: border-box; } /* ---- Starting-look step (centered, never scrolls) ---- */ .avatar-setup .as-gender { flex: 1; min-height: 0; min-width: 0; width: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 10px 16px 24px; } /* Centre each block with margin auto (not align-items) so wide content can never shift or overflow horizontally. */ .avatar-setup .as-gender > * { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; } .avatar-setup .as-gender h2 { font-size: clamp(20px, 5.5vw, 27px); font-weight: 800; margin: 0 auto; color: var(--as-ink); overflow-wrap: break-word; } .avatar-setup .as-gender p { color: var(--as-ink-soft); margin: 4px auto 18px; font-size: 14.5px; } /* minmax(0,1fr) lets the two tracks shrink below their content, so the cards never push the grid wider than the viewport (the classic grid overflow fix); the hard cap keeps them a sensible size on wider screens. */ .avatar-setup .as-gender-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 380px; } .avatar-setup .as-gender-card { min-width: 0; background: var(--as-panel); border: 2px solid var(--as-line); border-radius: 22px; padding: 14px 10px 18px; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; display: flex; flex-direction: column; align-items: center; gap: 8px; } .avatar-setup .as-gender-card:hover { transform: translateY(-2px); border-color: var(--as-accent-3); box-shadow: var(--as-shadow-soft); } .avatar-setup .as-gender-card.is-active { border-color: var(--as-accent); box-shadow: 0 0 0 3px var(--as-accent-3); } .avatar-setup .as-gender-card .as-gc-art { width: min(118px, 28vw); max-width: 100%; aspect-ratio: 264 / 280; } .avatar-setup .as-gender-card .as-gc-art svg { width: 100%; height: 100%; } .avatar-setup .as-gender-card .as-gc-name { font-weight: 800; font-size: 16px; color: var(--as-ink); } /* ---- Builder step (100dvh shell: preview fixed, controls scroll) ---- */ .avatar-setup .as-builder { flex: 1; min-height: 0; min-width: 0; width: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 4px clamp(14px, 4vw, 32px); } .avatar-setup .as-preview-pane { flex: none; width: 100%; min-width: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; } /* Centre the avatar card itself, independent of the wider scroll rows below it. */ .avatar-setup .as-sticker { margin: 0 auto; } .avatar-setup .as-sticker { height: clamp(140px, 28vh, 230px); aspect-ratio: 264 / 280; width: auto; background: var(--as-panel); border: 1px solid var(--as-line); border-radius: var(--as-radius-md); box-shadow: var(--as-shadow-soft); display: grid; place-items: center; overflow: hidden; } .avatar-setup .as-sticker-art { width: 90%; height: 90%; display: grid; place-items: center; } .avatar-setup .as-sticker-art svg { width: 100%; height: 100%; } .avatar-setup .as-sticker-curl { display: none; } /* flattened — no sticker gimmick */ .avatar-setup .as-frame-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; } .avatar-setup .as-frame-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--as-ink-soft); } .avatar-setup .as-segmented { display: inline-flex; background: var(--as-paper); border-radius: 999px; padding: 3px; } .avatar-setup .as-seg-btn { border: none; background: transparent; padding: 7px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--as-ink-soft); cursor: pointer; } .avatar-setup .as-seg-btn.is-active { background: var(--as-accent); color: #fff; } /* Background swatches under the preview span the pane width (scroll handled by the shared .as-swatch-row rule). */ .avatar-setup .as-preview-pane .as-swatch-row { width: 100%; } /* Control pane: tabs fixed, panels scroll internally so the page never does. */ .avatar-setup .as-control-pane { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; } .avatar-setup .as-tab-bar { flex: none; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .avatar-setup .as-tab-bar::-webkit-scrollbar { display: none; } .avatar-setup .as-tab-btn { flex: 0 0 auto; border: none; background: var(--as-panel); color: var(--as-ink-soft); padding: 9px 15px; border-radius: var(--as-radius-sm); font-weight: 700; font-size: 13.5px; cursor: pointer; box-shadow: 0 0 0 1px var(--as-line) inset; white-space: nowrap; } .avatar-setup .as-tab-btn.is-active { background: var(--as-accent); color: #fff; box-shadow: none; } .avatar-setup #as-tab-panels { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px 2px 6px; } .avatar-setup .as-tab-panel { display: none; } .avatar-setup .as-tab-panel.is-active { display: block; animation: as-fade 0.18s ease; } @keyframes as-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } .avatar-setup .as-field-group { background: var(--as-panel); border: 1px solid var(--as-line); border-radius: var(--as-radius-md); padding: 14px; margin-bottom: 10px; } .avatar-setup .as-field-group h3 { font-size: 14.5px; font-weight: 800; margin: 0 0 10px; color: var(--as-ink); display: flex; align-items: center; gap: 8px; } .avatar-setup .as-field-group .as-hint { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--as-ink-soft); background: var(--as-paper); padding: 2px 8px; border-radius: 999px; } /* Grid slider (filmstrip) */ .avatar-setup .as-grid-slider { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; } .avatar-setup .as-gs-nav { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--as-paper); color: var(--as-ink); font-size: 17px; line-height: 1; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; } .avatar-setup .as-gs-nav:hover { background: var(--as-accent-3); } .avatar-setup .as-gs-viewport { width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; border-radius: var(--as-radius-sm); } .avatar-setup .as-gs-viewport::-webkit-scrollbar { height: 5px; } .avatar-setup .as-gs-viewport::-webkit-scrollbar-thumb { background: var(--as-line); border-radius: 999px; } .avatar-setup .as-gs-track { display: flex; gap: 8px; padding: 2px; width: max-content; } .avatar-setup .as-gs-item { scroll-snap-align: start; flex: 0 0 68px; width: 68px; height: 68px; border: 2px solid transparent; background: var(--as-paper); border-radius: var(--as-radius-sm); padding: 5px; cursor: pointer; display: grid; place-items: center; } .avatar-setup .as-gs-item:last-child { scroll-snap-align: end; } .avatar-setup .as-gs-item.is-active { border-color: var(--as-accent); background: #fff; box-shadow: var(--as-shadow-soft); } .avatar-setup .as-gs-icon { width: 100%; height: 100%; border-radius: 8px; overflow: hidden; background: #fff; display: grid; place-items: center; } .avatar-setup .as-gs-icon svg { width: 96%; height: 96%; } .avatar-setup .as-gs-emoji { font-size: 24px; } /* Swatches — every colour row is ONE horizontal-scroll slider, so extra colours (and the Custom picker) come in on scroll instead of wrapping. Vertical padding gives the active swatch's ring room so it's never clipped by the scroll viewport's edge. */ .avatar-setup .as-swatch-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 9px; overflow-x: auto; overflow-y: hidden; padding: 7px 2px; scrollbar-width: thin; } .avatar-setup .as-swatch-row::-webkit-scrollbar { height: 5px; } .avatar-setup .as-swatch-row::-webkit-scrollbar-thumb { background: var(--as-line); border-radius: 999px; } .avatar-setup .as-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.08); cursor: pointer; flex: 0 0 auto; } .avatar-setup .as-swatch.is-active { box-shadow: 0 0 0 3px var(--as-panel), 0 0 0 4px var(--as-accent); } .avatar-setup .as-swatch.is-transparent { background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%) 0 0/10px 10px, linear-gradient(45deg, #ccc 25%, #fff 25%, #fff 75%, #ccc 75%) 5px 5px/10px 10px; } .avatar-setup .as-custom-color-wrap { display: flex; align-items: center; gap: 8px; margin-left: 4px; flex: 0 0 auto; } .avatar-setup .as-custom-color-wrap input[type=color] { width: 32px; height: 32px; border: none; border-radius: 50%; padding: 0; cursor: pointer; background: none; } .avatar-setup .as-custom-color-wrap label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--as-ink-soft); text-transform: uppercase; } .avatar-setup .as-subtab-bar { display: flex; gap: 6px; margin-bottom: 10px; } .avatar-setup .as-subtab-btn { border: none; background: var(--as-paper); color: var(--as-ink-soft); padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer; } .avatar-setup .as-subtab-btn.is-active { background: var(--as-accent); color: #fff; } .avatar-setup .as-hidden { display: none !important; } /* ---- Embedded variant — the only way the builder ships ------------------ It lives inside the chat sheet rather than owning the viewport: fills its parent, stays single-column at every width (the sheet is chat-shell narrow even on a desktop screen) and trims the vertical rhythm so preview + tabs + controls fit without the page ever scrolling. */ .avatar-setup.as-embed { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .as-embed .as-gender { padding: 6px 14px 18px; } .as-embed .as-gender h2 { font-size: clamp(18px, 4.6vw, 22px); } .as-embed .as-gender p { font-size: 13.5px; margin-bottom: 14px; } .as-embed .as-gender-card .as-gc-art { width: min(104px, 30vw); } .as-embed .as-builder { flex-direction: column; align-items: stretch; gap: 8px; max-width: none; margin: 0; padding: 4px 14px 0; } .as-embed .as-preview-pane { flex: none; align-self: auto; gap: 8px; } .as-embed .as-sticker { height: clamp(112px, 17vh, 168px); } .as-embed .as-control-pane { flex: 1; min-height: 0; max-width: none; max-height: none; align-self: auto; } .as-embed .as-field-group { padding: 12px; } .as-embed .as-gs-item { flex-basis: 60px; width: 60px; height: 60px; }