/* VIOS Viewer — extracted from viewer.html by REFACTOR-001 */ /* Do not edit manually. See src/viewer.html for context. */ /* Lines: 2207 (extracted from viewer.html which was 7676 lines before, 5468 after) */ @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&display=swap'); /* === Nuclear text selection off === */ *, *::before, *::after { -webkit-user-select: none !important; -webkit-touch-callout: none !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; } input, textarea, [contenteditable="true"] { -webkit-user-select: text !important; user-select: text !important; } /* === Theme-invariant tokens === */ :root { --panel-radius: 18px; --ui-sans: "Josefin Sans", "Segoe UI", Arial, sans-serif; --ui-serif: "Josefin Sans", "Segoe UI", Arial, sans-serif; --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --vios-stat-green: #16A34A; --vios-stat-green-bg: #DCFCE7; --vios-stat-amber: #B45309; --vios-stat-amber-bg: #FEF3C7; --vios-stat-red: #DC2626; --vios-stat-red-bg: #FEE2E2; --vios-stat-neutral: #6B5B4E; --vios-stat-neutral-bg: #F0EBE3; --topbar-height: 0px; --embed-chrome-scale: 1; /* JS (updateEmbedChromeScale) lowers this in embed mode to fit the bottom chrome to the frame */ } /* === Dark theme (default) === */ :root, :root[data-theme="dark"] { --vios-dark-950: #1f1b18; --vios-dark-900: #26211d; --vios-dark-850: #322b26; --vios-gold: #d9c5b2; --vios-gold-soft: rgba(217, 197, 178, 0.34); --vios-white-92: rgba(248, 240, 232, 0.92); --vios-white-74: rgba(241, 230, 218, 0.74); --vios-white-56: rgba(232, 220, 206, 0.56); --glass-bg: rgba(31, 27, 24, 0.64); --glass-bg-faint: rgba(0, 0, 0, 0.18); /* transparent, no blur — slight dark shade: joystick base */ --glass-bg-strong: rgba(31, 27, 24, 0.76); --glass-border: rgba(217, 197, 178, 0.22); --glass-shadow: 0 16px 42px rgba(8, 7, 6, 0.52); /* === V0.6 token additions === */ --vios-gold-deep: #C9A84C; --vios-panel-strong: rgba(31, 27, 24, 0.80); --vios-panel-shadow-strong: 0 16px 42px rgba(8, 7, 6, 0.42); --vios-gold-faint: rgba(217, 197, 178, 0.10); /* VIOS_DARK.pillInactiveBg — unused, V0.6 is light-only */ --v06-button-primary-bg: linear-gradient(180deg, #d9c5b2, #b89a7d); /* VIOS_DARK.ctaBg — unused, V0.6 is light-only */ --vios-sheet-shadow: 0 -20px 50px rgba(0, 0, 0, 0.32); /* VIOS_DARK.sheetShadow */ --vios-scrim: rgba(0, 0, 0, 0.42); /* VIOS_DARK.scrim */ --vios-divider: rgba(217, 197, 178, 0.14); /* VIOS_DARK.divider */ --vios-agent-photo-bg: rgba(217, 197, 178, 0.15); /* VIOS_DARK.agentPhotoBg */ --vios-agency-color: rgba(233, 220, 206, 0.72); /* VIOS_DARK.agencyColor */ --vios-cta-fg: #241f1b; /* VIOS_DARK.ctaFg */ --vios-list-active-bg: rgba(217, 197, 178, 0.16); /* VIOS_DARK.listActiveBg */ --vios-key-bg: rgba(217, 197, 178, 0.05); /* VIOS_DARK.keyBg */ --vios-key-border: rgba(217, 197, 178, 0.16); /* VIOS_DARK.keyBorder */ --vios-key-color: rgba(241, 230, 218, 0.38); /* VIOS_DARK.keyColor */ --vios-mouse-fill: rgba(217, 197, 178, 0.04); /* VIOS_DARK.mouseFill */ --vios-mouse-stroke: rgba(217, 197, 178, 0.25); /* VIOS_DARK.mouseStroke */ --vios-mouse-btn: rgba(217, 197, 178, 0.16); /* VIOS_DARK.mouseBtn */ --vios-mouse-div: rgba(217, 197, 178, 0.22); /* VIOS_DARK.mouseDiv */ --vios-mouse-wheel: rgba(217, 197, 178, 0.38); /* VIOS_DARK.mouseWheel */ --vios-mouse-ripple: rgba(217, 197, 178, 0.85); /* VIOS_DARK.mouseRipple */ --vios-accent: rgba(201, 168, 76, 0.10); /* VIOS_DARK.accent */ --vios-accent-border: rgba(201, 168, 76, 0.30); /* VIOS_DARK.accentBorder */ --vios-accent-text: #C9A84C; /* VIOS_DARK.accentText */ --vios-close-bg: rgba(217, 197, 178, 0.05); /* VIOS_DARK.closeBg */ --vios-close-border: rgba(217, 197, 178, 0.14); /* VIOS_DARK.closeBorder */ --vios-close-color: rgba(241, 230, 218, 0.42); /* VIOS_DARK.closeColor */ --vios-key-active-bg: rgba(217, 197, 178, 0.18); /* VIOS_DARK.keyActiveBg */ --vios-key-active-border: rgba(217, 197, 178, 0.65); /* VIOS_DARK.keyActiveBorder */ --vios-dot-bg: rgba(217, 197, 178, 0.03); /* VIOS_DARK.dotBg */ --vios-dot-border: rgba(217, 197, 178, 0.09); /* VIOS_DARK.dotBorder */ --vios-or-color: rgba(217, 197, 178, 0.30); /* VIOS_DARK.orColor */ --vios-pill-active-bg: rgba(217, 197, 178, 0.34); /* VIOS_DARK.pillActiveBg */ /* === Phase 4 editor tokens (VIOS_DARK — Editor.html 67–72) === */ --vios-input-bg: rgba(217, 197, 178, 0.06); /* VIOS_DARK.inputBg */ --vios-input-border: rgba(217, 197, 178, 0.18); /* VIOS_DARK.inputBorder */ --vios-zone-wall: rgba(220, 88, 88, 0.85); /* VIOS_DARK.wallColor */ --vios-zone-wall-bg: rgba(220, 88, 88, 0.08); /* VIOS_DARK.wallBg */ --vios-zone-wall-border: rgba(220, 88, 88, 0.30); /* VIOS_DARK.wallBorder */ --vios-zone-trigger: rgba(212, 168, 67, 0.95); /* VIOS_DARK.triggerColor */ --vios-zone-trigger-bg: rgba(212, 168, 67, 0.08); /* VIOS_DARK.triggerBg */ --vios-zone-trigger-border: rgba(212, 168, 67, 0.36); /* VIOS_DARK.triggerBorder */ --vios-danger: rgba(240, 100, 80, 0.90); /* VIOS_DARK.dangerColor */ --vios-danger-bg: rgba(240, 100, 80, 0.10); /* VIOS_DARK.dangerBg */ --vios-danger-border: rgba(240, 100, 80, 0.28); /* VIOS_DARK.dangerBorder */ --vios-success: rgba(100, 196, 140, 0.90); /* VIOS_DARK.successColor */ --vios-success-bg: rgba(100, 196, 140, 0.10); /* VIOS_DARK.successBg */ --vios-success-border: rgba(100, 196, 140, 0.28); /* VIOS_DARK.successBorder */ --vios-white-38: rgba(232, 220, 206, 0.38); /* derived: white56 RGB at 0.38 opacity */ --vios-gold-deep-rgb: 201, 168, 76; /* VIOS_DARK.goldDeep #C9A84C split as RGB */ --vios-map-bg: #17110d; /* VIOS_DARK.mapBg */ --vios-map-grid: rgba(217, 197, 178, 0.14); /* VIOS_DARK.mapGrid */ --vios-map-poi-bg: rgba(31, 27, 24, 0.90); /* VIOS_DARK.mapPoiBg */ --vios-map-poi-border: rgba(217, 197, 178, 0.65); /* VIOS_DARK.mapPoiBorder */ --vios-scrollbar-thumb: rgba(217, 197, 178, 0.30); /* derived: gold RGB — scrollbar thumb rest */ --vios-scrollbar-thumb-hover: rgba(217, 197, 178, 0.45); --vios-scrollbar-thumb-drag: rgba(217, 197, 178, 0.58); } /* === Light theme === */ /* Values sourced from VIOS_LIGHT in design-tool/Tools/Viewer/Desktop_Standalone.html */ :root[data-theme="light"] { --vios-dark-950: #f2e9de; /* VIOS_LIGHT.bg */ --vios-dark-900: #ede5da; /* VIOS_LIGHT.bgSoft */ --vios-dark-850: #e8ddd0; /* derived: one step darker than bgSoft */ --vios-gold: var(--agency-accent, #d2622e); /* Updated tokens: ember; --agency-accent = tenant brand override (#327) */ --vios-gold-soft: rgba(210, 98, 46, 0.32); /* Updated tokens: ember tint/border (was gold at 0.34) */ --vios-white-92: rgba(36, 22, 10, 0.90); /* VIOS_LIGHT.white92 */ --vios-white-74: rgba(36, 22, 10, 0.72); /* Updated tokens: ink secondary (was #382412 at 0.74) */ --vios-white-56: rgba(76, 52, 28, 0.52); /* VIOS_LIGHT.white56 */ --glass-bg: rgba(250, 244, 236, 0.94); /* Updated tokens: cream glass (was #FFFAF4 at 0.78) */ --glass-bg-faint: rgba(0, 0, 0, 0.18); /* transparent, no blur — slight dark shade: joystick base */ --glass-bg-strong: rgba(250, 244, 236, 0.97); /* Updated tokens: glass/panel near-opaque */ --glass-border: rgba(88, 60, 36, 0.20); /* Updated tokens: border 0.16 -> 0.20 */ --glass-shadow: 0 4px 20px rgba(88, 60, 36, 0.12); /* VIOS_LIGHT.panelShadow */ --vios-gold-deep: var(--agency-accent-deep, #ad4a18); /* Updated tokens: ember deep / accent text; brand override (#327) */ --vios-panel-strong: rgba(250, 244, 236, 0.97); /* Updated tokens: glass/panel near-opaque */ --vios-panel-shadow-strong: 0 12px 32px rgba(88, 60, 36, 0.18); /* derived: stronger panelShadow */ --vios-gold-faint: rgba(88, 60, 36, 0.06); /* VIOS_LIGHT.pillInactiveBg */ --v06-button-primary-bg: linear-gradient(180deg, var(--agency-btn-top, #db6b33), var(--agency-btn-bottom, #a8421c)); /* Updated tokens: ember CTA gradient; brand override (#327) */ --vios-sheet-shadow: 0 -20px 50px rgba(88, 60, 36, 0.18); /* VIOS_LIGHT.sheetShadow */ --vios-scrim: rgba(22, 19, 15, 0.34); /* Updated tokens: scrim base #16130F */ --vios-divider: rgba(88, 60, 36, 0.10); /* VIOS_LIGHT.divider */ --vios-agent-photo-bg: rgba(88, 60, 36, 0.10); /* VIOS_LIGHT.agentPhotoBg */ --vios-agency-color: rgba(36, 22, 10, 0.68); /* Updated tokens: ink (was #382412) */ --vios-cta-fg: var(--agency-on-accent, rgba(255, 248, 240, 0.95)); /* VIOS_LIGHT.ctaFg; contrast-guarded brand ink (#327) */ --vios-list-active-bg: rgba(88, 60, 36, 0.10); /* VIOS_LIGHT.listActiveBg */ --vios-key-bg: rgba(88, 60, 36, 0.05); /* VIOS_LIGHT.keyBg */ --vios-key-border: rgba(88, 60, 36, 0.20); /* Updated tokens: border 0.16 -> 0.20 */ --vios-key-color: rgba(76, 52, 28, 0.38); /* VIOS_LIGHT.keyColor */ --vios-mouse-fill: rgba(88, 60, 36, 0.04); /* VIOS_LIGHT.mouseFill */ --vios-mouse-stroke: rgba(88, 60, 36, 0.28); /* VIOS_LIGHT.mouseStroke */ --vios-mouse-btn: rgba(88, 60, 36, 0.10); /* VIOS_LIGHT.mouseBtn */ --vios-mouse-div: rgba(88, 60, 36, 0.18); /* VIOS_LIGHT.mouseDiv */ --vios-mouse-wheel: rgba(88, 60, 36, 0.38); /* VIOS_LIGHT.mouseWheel */ --vios-mouse-ripple: rgba(88, 60, 36, 0.75); /* VIOS_LIGHT.mouseRipple */ --vios-accent: rgba(210, 98, 46, 0.12); /* Updated tokens: ember tint bg */ --vios-accent-border: rgba(210, 98, 46, 0.32); /* Updated tokens: ember border */ --vios-accent-text: var(--agency-accent-deep, #ad4a18); /* Updated tokens: ember deep text; brand override (#327) */ --vios-close-bg: rgba(88, 60, 36, 0.05); /* VIOS_LIGHT.closeBg */ --vios-close-border: rgba(88, 60, 36, 0.14); /* VIOS_LIGHT.closeBorder */ --vios-close-color: rgba(36, 22, 10, 0.40); /* VIOS_LIGHT.closeColor */ --vios-key-active-bg: rgba(210, 98, 46, 0.11); /* Updated tokens: ember */ --vios-key-active-border: rgba(210, 98, 46, 0.52); /* Updated tokens: ember */ --vios-dot-bg: rgba(88, 60, 36, 0.04); /* VIOS_LIGHT.dotBg */ --vios-dot-border: rgba(88, 60, 36, 0.10); /* VIOS_LIGHT.dotBorder */ --vios-or-color: rgba(76, 52, 28, 0.32); /* VIOS_LIGHT.orColor */ --vios-pill-active-bg: rgba(88, 60, 36, 0.22); /* VIOS_LIGHT.pillActiveBg */ /* === Phase 4 editor tokens (VIOS_LIGHT — Editor.html 88–92) === */ --vios-input-bg: rgba(88, 60, 36, 0.05); /* VIOS_LIGHT.inputBg */ --vios-input-border: rgba(88, 60, 36, 0.20); /* Updated tokens: border 0.16 -> 0.20 */ --vios-zone-wall: rgba(200, 60, 60, 0.85); /* VIOS_LIGHT.wallColor */ --vios-zone-wall-bg: rgba(200, 60, 60, 0.07); /* VIOS_LIGHT.wallBg */ --vios-zone-wall-border: rgba(200, 60, 60, 0.26); /* VIOS_LIGHT.wallBorder */ --vios-zone-trigger: rgba(160, 110, 20, 0.95); /* VIOS_LIGHT.triggerColor */ --vios-zone-trigger-bg: rgba(160, 110, 20, 0.07); /* VIOS_LIGHT.triggerBg */ --vios-zone-trigger-border: rgba(160, 110, 20, 0.30); /* VIOS_LIGHT.triggerBorder */ --vios-danger: rgba(200, 50, 50, 0.90); /* VIOS_LIGHT.dangerColor */ --vios-danger-bg: rgba(200, 50, 50, 0.08); /* VIOS_LIGHT.dangerBg */ --vios-danger-border: rgba(200, 50, 50, 0.24); /* VIOS_LIGHT.dangerBorder */ --vios-success: rgba(77, 168, 102, 0.90); /* Updated tokens: success #4DA866 */ --vios-success-bg: rgba(77, 168, 102, 0.08); /* Updated tokens: success #4DA866 */ --vios-success-border: rgba(77, 168, 102, 0.24); /* Updated tokens: success #4DA866 */ --vios-white-38: rgba(76, 52, 28, 0.34); /* derived: white56 RGB at 0.34 opacity (light-adjusted) */ --vios-gold-deep-rgb: var(--agency-accent-rgb, 210, 98, 46); /* Updated tokens: ember RGB for tint fills/borders; brand override (#327) */ --vios-map-bg: #ddd0c4; /* VIOS_LIGHT.mapBg */ --vios-map-grid: rgba(88, 60, 36, 0.14); /* VIOS_LIGHT.mapGrid */ --vios-map-poi-bg: rgba(250, 244, 236, 0.92); /* VIOS_LIGHT.mapPoiBg */ --vios-map-poi-border: rgba(88, 60, 36, 0.55); /* VIOS_LIGHT.mapPoiBorder */ --vios-scrollbar-thumb: rgba(88, 60, 36, 0.30); /* Figma Primitive/Scrollbar: umber #583C24 rest */ --vios-scrollbar-thumb-hover: rgba(88, 60, 36, 0.45); /* Figma Primitive/Scrollbar: hover */ --vios-scrollbar-thumb-drag: rgba(88, 60, 36, 0.58); /* Figma Primitive/Scrollbar: drag */ } /* === [Agency Branding #327] accent-alpha derivations === */ /* Re-derive the accent tint tokens from --vios-gold so a tenant brand (--agency-accent, set at boot by brand-chrome.js) cascades into every tint/border. Exact equivalence when unbranded: color-mix(in srgb, C N%, transparent) ≡ rgba(C, N/100) — so the ember look is byte-identical to the static declarations above. @supports keeps old engines on those static lines (unbranded parity everywhere; a branded tour on an old engine degrades to solid accents + ember tints). Custom properties can't use the invalid-declaration fallback trick — the last declaration always wins at parse time — hence the guard. */ @supports (background: color-mix(in srgb, red 50%, transparent)) { :root[data-theme="light"] { --vios-gold-soft: color-mix(in srgb, var(--vios-gold) 32%, transparent); --vios-accent: color-mix(in srgb, var(--vios-gold) 12%, transparent); --vios-accent-border: color-mix(in srgb, var(--vios-gold) 32%, transparent); --vios-key-active-bg: color-mix(in srgb, var(--vios-gold) 11%, transparent); --vios-key-active-border: color-mix(in srgb, var(--vios-gold) 52%, transparent); } } /* === [Themed Scrollbars] === */ /* Standard properties cover Chrome 121+/Firefox/Safari 18.2+ and keep the macOS auto-hiding overlay; ::-webkit-* rules are the older-Safari fallback and carry the hover/drag states (ignored by engines that honor scrollbar-color). Design source: Figma "Primitive / Scrollbar". */ * { scrollbar-width: thin; scrollbar-color: var(--vios-scrollbar-thumb) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--vios-scrollbar-thumb); border-radius: 8px; } *::-webkit-scrollbar-thumb:hover { background: var(--vios-scrollbar-thumb-hover); } *::-webkit-scrollbar-thumb:active { background: var(--vios-scrollbar-thumb-drag); } html, /* TODO Phase 2: theme — replace hard-coded colour with token */ body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: var(--ui-sans); background: radial-gradient(circle at 15% 15%, #312a24, #211c18 62%, #171310 100%); color: var(--vios-white-92); } canvas { display: block; touch-action: none; } /* TODO Phase 2: theme — replace hard-coded colour with token */ /* === [L3 Loading] ==================================================== Transparent overlay — the canvas is the backdrop; the model streaming in is the show. #loadingBackdrop (dark radial) covers only the pre-render gap and fades once body.model-streaming is set (real LCC progress, added by loading-ui.js). The lockup exits with it; the glass property card rides the whole load and dissolves when the overlay hides on scene-ready. */ #loadingOverlay { position: fixed; inset: 0; z-index: 40; pointer-events: none; /* input is gated by JS while loading; the card re-enables itself */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; background: transparent; opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0.4s ease; overflow: hidden; } #loadingOverlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; } #loadingBackdrop { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 50% 40%, #272220, #16130f); opacity: 1; transition: opacity 1.1s ease; } body.model-streaming #loadingBackdrop { opacity: 0; } #loadingLockup { position: relative; z-index: 2; width: min(460px, 64vw); animation: loading-lockup-in 0.8s cubic-bezier(0, 0, 0.35, 1) both; } #loadingLockup img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 22px rgba(22, 16, 10, 0.35)); user-select: none; -webkit-user-select: none; } /* === [Agency Branding #327] === swapped-in agency logo: contain within the lockup instead of stretching an arbitrary-aspect mark to wordmark width. */ #loadingLockup img.is-agency-logo { width: auto; max-width: 100%; max-height: 96px; margin: 0 auto; object-fit: contain; } body.model-streaming #loadingLockup { animation: loading-lockup-out 0.6s ease both; } @keyframes loading-lockup-in { from { opacity: 0; transform: translateY(12px) scale(1.02); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes loading-lockup-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } } /* One ember sheen pass behind the lockup while the backdrop is up. */ #loadingSheen { position: absolute; top: 50%; left: 0; width: 220px; height: 150%; transform: translate(-80px, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--vios-gold), transparent 72%); filter: blur(46px); opacity: 0; pointer-events: none; animation: loading-sheen 1.9s ease-in-out 1s 1 both; } @keyframes loading-sheen { 0% { opacity: 0; transform: translate(-80px, -50%); } 26% { opacity: 0.2; } 74% { opacity: 0.18; } 100% { opacity: 0; transform: translate(340px, -50%); } } #loadingCard { position: relative; z-index: 2; width: min(440px, 90vw); padding: 18px 18px 14px; border-radius: 20px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); color: var(--vios-white-92); backdrop-filter: blur(18px) saturate(1.05); -webkit-backdrop-filter: blur(18px) saturate(1.05); pointer-events: auto; animation: loading-card-in 0.7s cubic-bezier(0, 0, 0.35, 1) 0.35s both; } @keyframes loading-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { #loadingLockup, #loadingCard, body.model-streaming #loadingLockup { animation: none; } #loadingSheen { display: none; } #loadingBackdrop { transition: none; } } #loadingBrand { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: none; color: var(--vios-white-56); } #loadingTitle { margin-top: 6px; font-size: 22px; font-weight: 500; font-family: var(--ui-serif); letter-spacing: 0.01em; } #loadingSubtitle { margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--vios-white-74); letter-spacing: 0.01em; } #loadingSubtitle:empty { display: none; } #loadingAttributes { margin-top: 6px; font-size: 13px; color: var(--vios-white-74); letter-spacing: 0.02em; } #loadingAttributes:empty { display: none; } #loadingPrice { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--vios-gold-deep); letter-spacing: 0.01em; } #loadingPrice:empty { display: none; } #loadingStatus { margin-top: 8px; font-size: 13px; color: var(--vios-white-74); } #loadingProgressWrap { margin-top: 12px; width: 100%; height: 5px; border-radius: 999px; background: var(--vios-gold-faint); overflow: hidden; } #loadingProgressBar { height: 100%; width: 0%; border-radius: 999px; background: var(--vios-gold); transition: width 0.12s linear; } #loadingPercent { margin-top: 8px; font-size: 12px; color: var(--vios-white-74); } #loadingErrorActions { margin-top: 10px; } #loadingErrorActions button { border: 1px solid var(--glass-border); background: var(--glass-bg-strong); color: var(--vios-white-92); padding: 7px 10px; border-radius: 999px; cursor: pointer; font-size: 12px; } /* TODO Phase 2: theme — replace hard-coded colour with token */ #overlay { position: fixed; inset: 0; z-index: 10; pointer-events: none; color: #f4f4f4; } .panel { position: fixed; pointer-events: auto; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--panel-radius); backdrop-filter: blur(18px) saturate(1.05); box-shadow: var(--glass-shadow); } #topBar { position: fixed; left: calc(14px + var(--safe-left)); right: calc(14px + var(--safe-right)); top: calc(12px + var(--safe-top)); height: 56px; z-index: 12; pointer-events: none; } #help { transition: opacity 0.32s ease, filter 0.32s ease; } body.viewer-idle #help { opacity: 0.2; filter: saturate(0.8); } #dpad { position: fixed; bottom: 80px; right: 16px; display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 4px; z-index: 5; opacity: 0; transition: opacity 0.32s ease; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .dpad-btn { position: relative; width: 44px; height: 44px; border-radius: 10px; background: var(--glass-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--glass-border); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; padding: 0; } .dpad-btn:active { background: var(--glass-bg-strong); } .dpad-arrow { font-size: 18px; line-height: 1; } .dpad-key { position: absolute; bottom: 4px; right: 5px; font-size: 9px; opacity: 0.55; color: white; font-family: monospace; line-height: 1; display: none; } /* === Hotspot Visual Redesign === */ /* Panel styling matches V0.6 .v06-panel — same glass-bg, border, radius and shadow tokens used by PropertyCard / AgentCard / InspectionCard. */ #hotspotInfoCard { left: calc(16px + var(--safe-left)); bottom: calc(80px + var(--safe-bottom)); right: auto; width: min(320px, calc(100vw - 32px - var(--safe-left) - var(--safe-right))); padding: 14px 16px; z-index: 13; background: var(--glass-bg); backdrop-filter: blur(18px) saturate(1.05); -webkit-backdrop-filter: blur(18px) saturate(1.05); border: 1px solid var(--glass-border); border-radius: var(--panel-radius); box-shadow: var(--glass-shadow); opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.97); /* hide: fast ease-in upward */ transition: opacity 0.2s ease-in, transform 0.2s ease-in, visibility 0.2s ease-in; pointer-events: none; } #hotspotInfoCard::before { display: none; } #hotspotInfoCard.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); /* show: gentle float-up ease-out */ transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s; pointer-events: auto; } /* === Mobile hotspot card position === Default `bottom: 80px` overlaps the V0.6 mobile chrome stack: - #v06MobileRoomNavbar at bottom: 8px (height ~58px, top edge ~66px) - .v06-stick-move at bottom: 94px (right corner, 94px circle) (The "?" help + Measure toggles live in the TopBar / top-right.) Pushing the card to top-left, just under the TopBar, keeps it readable without colliding with any of the bottom controls. */ body.is-touch #hotspotInfoCard { top: calc(120px + var(--safe-top)); left: calc(12px + var(--safe-left)); right: auto; bottom: auto; width: min(280px, calc(100vw - 24px - var(--safe-left) - var(--safe-right))); } /* Eyebrow — matches .v06-inspection-card-eyebrow */ #hotspotInfoEyebrow { font-family: var(--ui-sans); font-size: 9px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vios-white-56); } /* Title — matches .v06-property-card-title (sans, 18px, white-92) */ #hotspotInfoTitle { margin-top: 4px; font-family: var(--ui-sans); font-size: 18px; font-weight: 500; letter-spacing: 0.01em; color: var(--vios-white-92); line-height: 1.2; } /* Body — matches V0.6 body text (sans, 12px, white-74) */ #hotspotInfoBody { margin-top: 6px; font-family: var(--ui-sans); font-size: 12px; line-height: 1.5; color: var(--vios-white-74); } /* CTA — matches .v06-agent-enquire-btn primary style (solid gold-deep pill) */ #hotspotInfoCta { margin-top: 12px; min-height: 32px; width: 100%; border-radius: 999px; border: none; background: var(--vios-gold); color: var(--vios-cta-fg); font-family: var(--ui-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; padding: 0 14px; cursor: pointer; transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } #hotspotInfoCta:hover { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(201, 168, 76, 0.3); transform: translateY(-1px); } #hotspotInfoCta:active { transform: translateY(0); filter: brightness(0.98); } #hotspotInfoCta:focus-visible { outline: 2px solid var(--vios-gold); outline-offset: 2px; } /* TODO Phase 2: theme — replace hard-coded colour with token */ #settingsBackdrop { position: fixed; inset: 0; background: rgba(24, 20, 17, 0.32); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 11; } #settingsBackdrop.open { opacity: 1; pointer-events: auto; } #settingsDrawer { right: calc(14px + var(--safe-right)); top: calc(72px + var(--safe-top)); width: min(340px, calc(100vw - 28px - var(--safe-left) - var(--safe-right))); max-height: calc(100vh - 90px - var(--safe-top) - var(--safe-bottom)); padding: 12px; z-index: 12; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateX(24px); pointer-events: none; transition: transform 0.25s ease, opacity 0.25s ease; } #settingsDrawer.open { opacity: 1; transform: translateX(0); pointer-events: auto; } #settingsHeader { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; } #settingsCloseBtn { width: 30px; height: 30px; padding: 0; border-radius: 10px; } #settingsBody { display: flex; flex-direction: column; gap: 8px; overflow: auto; padding-right: 2px; } /* TODO Phase 2: theme — replace hard-coded colour with token */ #homeBtn { justify-content: center; background: var(--vios-gold-soft); border-color: rgba(217, 197, 178, 0.56); color: #2a231e; } #speedWrap, #heightWrap, #fovWrap { display: grid; grid-template-columns: 66px 1fr auto; align-items: center; gap: 8px; font-size: 14px; color: var(--vios-white-92); } #qualityWrap, #autoWrap, #perfWrap { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; font-size: 14px; color: var(--vios-white-92); } #speedSlider, #heightSlider, #fovSlider { width: 100%; } /* TODO Phase 2: theme — replace hard-coded colour with token */ #qualitySelect { width: 128px; height: 32px; background: rgba(31, 27, 24, 0.82); color: var(--vios-white-92); border: none; border-radius: 10px; padding: 3px 8px; font-size: 13px; } #autoPerfToggle, #perfModeToggle { accent-color: var(--vios-gold); } #fpsMeter { font-size: 12px; color: var(--vios-white-74); margin-top: 2px; } .sliderWrap.disabled { opacity: 0.45; } #help { left: calc(14px + var(--safe-left)); bottom: calc(66px + var(--safe-bottom)); padding: 8px 12px; font-size: 12px; line-height: 1.35; max-width: min(560px, calc(100vw - 28px - var(--safe-left) - var(--safe-right))); opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; } #help.show { opacity: 1; transform: translateY(0); } @media (max-width: 980px) { #topBar { left: calc(8px + var(--safe-left)); right: calc(8px + var(--safe-right)); top: calc(8px + var(--safe-top)); height: 52px; } #hotspotInfoCard { left: calc(12px + var(--safe-left)); right: auto; bottom: calc(80px + var(--safe-bottom)); width: min(300px, calc(100vw - 24px - var(--safe-left) - var(--safe-right))); } #settingsDrawer { right: calc(8px + var(--safe-right)); top: calc(64px + var(--safe-top)); } #help { left: calc(8px + var(--safe-left)); bottom: calc(54px + var(--safe-bottom)); max-width: min(560px, calc(100vw - 16px - var(--safe-left) - var(--safe-right))); } } @media (max-width: 1120px) and (min-width: 981px) { #topBar { left: calc(10px + var(--safe-left)); right: calc(10px + var(--safe-right)); top: calc(10px + var(--safe-top)); } #settingsDrawer { right: calc(10px + var(--safe-right)); top: calc(66px + var(--safe-top)); } #hotspotInfoCard { left: calc(12px + var(--safe-left)); right: auto; bottom: calc(80px + var(--safe-bottom)); width: min(296px, calc(100vw - 24px - var(--safe-left) - var(--safe-right))); padding: 12px 13px 13px; } #hotspotInfoTitle { font-size: 18px; } } @media (max-width: 820px) { #rotInfo { display: none; } #hotspotInfoCard { width: min(276px, calc(100vw - 24px - var(--safe-left) - var(--safe-right))); } #hotspotInfoBody { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } } @media (max-width: 680px) { #hotspotInfoCard { width: min(264px, calc(100vw - 24px - var(--safe-left) - var(--safe-right))); padding: 11px 12px 12px; } #hotspotInfoBody { display: none; } } @media (pointer: coarse), (hover: none) { #settingsBody button, #hotspotInfoCta { min-height: 42px; } #settingsCloseBtn { min-width: 38px; min-height: 38px; } } /* === Embed Mode === */ /* Applied when viewer runs inside an iframe or when ?mode=embed is set. */ body.embed-mode { overflow: hidden; } /* Hide property-specific text in the loading card during embed mode. */ /* #loadingBrand ("powered by VIOS"), #loadingStatus, and the progress */ /* bar remain visible — the branded loading state is preserved. */ body.embed-mode #loadingTitle, body.embed-mode #loadingSubtitle, body.embed-mode #loadingAttributes, body.embed-mode #loadingPrice { display: none !important; } /* === Embed Preview Card === */ /* Hidden by default; shown only in embed mode. z-index 45 sits above the */ /* loading overlay (z-index 40) so the preview is visible while model loads. */ #embedPreview { display: none; } /* TODO Phase 2: theme — replace hard-coded colour with token */ body.embed-mode.preview-active #embedPreview { display: flex; position: fixed; inset: 0; z-index: 45; align-items: center; justify-content: center; flex-direction: column; background: #111; cursor: default; } .embed-preview-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; } .embed-preview-logo, .embed-preview-title { display: none; } .embed-preview-logo { width: 40px; height: 40px; opacity: 0.9; } /* TODO Phase 2: theme — replace hard-coded colour with token */ .embed-preview-title { color: rgba(255, 255, 255, 0.7); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0.03em; margin: 0; } .embed-launch-btn { display: inline-flex; align-items: center; background: rgba(217, 197, 178, 0.12); color: rgba(248, 240, 232, 0.92); border: 1px solid rgba(217, 197, 178, 0.28); border-radius: 999px; padding: 12px 32px; font-family: "Josefin Sans", "Segoe UI", Arial, sans-serif; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.16s ease, border-color 0.16s ease; } .embed-launch-btn:hover { background: rgba(217, 197, 178, 0.34); border-color: #d9c5b2; } body.embed-mode.preview-active #embedPreview.has-thumb { background-size: cover; background-position: center; background-repeat: no-repeat; } /* TODO Phase 2: theme — replace hard-coded colour with token */ body.embed-mode.preview-active #embedPreview.has-thumb::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } body.embed-mode.preview-active #embedPreview.has-thumb .embed-preview-inner { position: relative; z-index: 1; } /* While the embed preview is active, hide ALL viewer chrome. preview-active class is added to by JS on page load in embed mode and removed when the user clicks "Explore in 3D". Re-added on fullscreen exit. */ body.embed-mode.preview-active #dpad { display: none !important; } /* Suppress the Day 2 click-hint in embed mode — preview card replaces it */ body.embed-mode #embedClickHint { display: none !important; } /* === Embed Click-to-Explore Hint === */ #embedClickHint { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 100; pointer-events: none; } #embedClickHint.hidden { display: none; } /* TODO Phase 2: theme — replace hard-coded colour with token */ #embedClickHint span { background: rgba(0, 0, 0, 0.55); color: #fff; padding: 10px 22px; border-radius: 24px; font-size: 13px; font-weight: 500; letter-spacing: 0.05em; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: embedHintPulse 2s ease-in-out infinite; } @keyframes embedHintPulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } } /* === Teleport fade overlay === */ #teleportFade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 500; transition: opacity 0.18s ease; } /* === Analytics debug overlay === */ #analytics-debug { position: fixed; bottom: 12px; left: 12px; background: rgba(0, 0, 0, 0.82); color: #00ff88; font: 11px/1.6 monospace; padding: 10px 14px; border-radius: 7px; z-index: 9999; max-width: 380px; max-height: 260px; overflow-y: auto; display: none; pointer-events: none; } /* === V0.6 component variant (body.ui-v06) === Phase 2 component-library rules attach here. Activate with `?ui=v06` in the URL (persisted to localStorage); reset with `?ui=v05`. Empty until Phase 2 begins populating it. */ body.ui-v06 { /* Phase 2 attaches here */ } /* === V0.6 components === */ body.ui-v06 .v06-panel { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--panel-radius); backdrop-filter: blur(18px) saturate(1.05); -webkit-backdrop-filter: blur(18px) saturate(1.05); box-shadow: var(--glass-shadow); } body.ui-v06 .v06-panel-strong { background: var(--vios-panel-strong); backdrop-filter: blur(22px) saturate(1.08); -webkit-backdrop-filter: blur(22px) saturate(1.08); box-shadow: var(--vios-panel-shadow-strong); } /* --- Pill --- */ body.ui-v06 .v06-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--vios-gold-faint); color: var(--vios-white-92); font-family: var(--ui-sans); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; border: 1px solid var(--glass-border); transition: background 0.16s ease, border-color 0.16s ease; } body.ui-v06 .v06-pill.is-active { background: var(--vios-gold-soft); border-color: var(--vios-gold); } /* --- Badge --- */ body.ui-v06 .v06-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 5px; font-family: var(--ui-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; } body.ui-v06 .v06-badge-success { background: var(--vios-stat-green-bg); color: var(--vios-stat-green); } body.ui-v06 .v06-badge-warning { background: var(--vios-stat-amber-bg); color: var(--vios-stat-amber); } body.ui-v06 .v06-badge-error { background: var(--vios-stat-red-bg); color: var(--vios-stat-red); } body.ui-v06 .v06-badge-neutral { background: var(--vios-stat-neutral-bg); color: var(--vios-stat-neutral); } /* --- Button --- */ body.ui-v06 .v06-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; border-radius: 10px; font-family: var(--ui-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; border: 1px solid transparent; cursor: pointer; user-select: none; transition: background 0.16s ease, border-color 0.16s ease, transform 0.10s ease, box-shadow 0.16s ease; } body.ui-v06 .v06-button:focus-visible { outline: 2px solid var(--vios-gold); outline-offset: 2px; } body.ui-v06 .v06-button:active { transform: translateY(1px); } body.ui-v06 .v06-button:disabled, body.ui-v06 .v06-button.is-disabled { opacity: 0.5; cursor: not-allowed; transform: none; } body.ui-v06 .v06-button-primary { background: var(--v06-button-primary-bg); color: var(--vios-white-92); box-shadow: 0 2px 8px rgba(88, 60, 36, 0.16); } body.ui-v06 .v06-button-primary:hover { box-shadow: 0 4px 14px rgba(88, 60, 36, 0.22); } body.ui-v06 .v06-button-secondary { background: transparent; color: var(--vios-gold-deep); border-color: var(--glass-border); } body.ui-v06 .v06-button-secondary:hover { background: var(--vios-gold-soft); } body.ui-v06 .v06-button-icon { padding: 0; width: 38px; height: 38px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--vios-gold-deep); } body.ui-v06 .v06-button-icon:hover { background: var(--glass-bg-strong); } /* --- Pill modifier (shape only — colours/border/font-size come from component-specific rules). Three variants: default 32 tall, -sm 30 tall (TopRightActions Share), -lg 34 tall (Tutorial buttons). --- */ body.ui-v06 .v06-button-pill, body.ui-v06 .v06-button-pill-sm, body.ui-v06 .v06-button-pill-lg { border-radius: 999px; padding: 0 14px; transition: all 0.15s; } body.ui-v06 .v06-button-pill { height: 32px; } body.ui-v06 .v06-button-pill-sm { height: 30px; } body.ui-v06 .v06-button-pill-lg { height: 34px; } /* --- Sheet --- */ body.ui-v06 .v06-sheet { position: fixed; bottom: 0; left: 0; right: 0; max-height: 78vh; background: var(--vios-panel-strong); border-top-left-radius: 24px; border-top-right-radius: 24px; border: 1px solid var(--glass-border); border-bottom: none; box-shadow: var(--vios-sheet-shadow); backdrop-filter: blur(22px) saturate(1.08); -webkit-backdrop-filter: blur(22px) saturate(1.08); padding-top: 12px; transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.21, 1); z-index: 200; overflow: hidden; display: flex; flex-direction: column; } body.ui-v06 .v06-sheet.is-open { transform: translateY(0); } body.ui-v06 .v06-sheet-handle { width: 38px; height: 4px; border-radius: 4px; background: var(--glass-border); margin: 0 auto 8px; flex: 0 0 auto; } body.ui-v06 .v06-sheet-backdrop { position: fixed; inset: 0; background: var(--vios-scrim); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.32s ease; z-index: 199; } body.ui-v06 .v06-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; } /* --- Card --- */ body.ui-v06 .v06-card { padding: 11px 16px; } /* === V0.6 layout: desktop top-left cluster === */ body:not(.ui-v06) #v06TopLeft { display: none; } body.ui-v06 #v06TopLeft { position: fixed; top: 18px; left: 18px; display: flex; gap: 12px; z-index: 12; pointer-events: auto; } body.ui-v06 .v06-property-card { width: 220px; /* mock line 336 */ position: relative; /* mock line 336 */ display: flex; /* mock line 336 */ flex-direction: column; /* mock line 336 */ } body.ui-v06 .v06-property-card-content { flex: 1; /* mock line 337 */ } body.ui-v06 .v06-property-card-eyebrow { font-family: var(--ui-sans); font-size: 10px; letter-spacing: 0.06em; line-height: 1; color: var(--vios-white-74); } body.ui-v06 .v06-property-card-title { font-family: var(--ui-sans); font-size: 18px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.2; color: var(--vios-white-92); margin-top: 3px; } body.ui-v06 .v06-property-card-address { font-family: var(--ui-sans); font-size: 12px; font-weight: 400; letter-spacing: 0.01em; color: var(--vios-white-74); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.ui-v06 .v06-property-card-price { font-family: var(--ui-sans); font-size: 16px; font-weight: 500; letter-spacing: 0.01em; color: var(--vios-gold-deep); margin-top: 6px; } body.ui-v06 .v06-property-card-attrs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; /* breathing room around the "·" separator between groups — independent of the tight 4px icon→number gap inside each .v06-property-card-attr */ font-family: var(--ui-sans); font-size: 14px; color: var(--vios-white-74); line-height: 1.6; margin-top: 6px; } body.ui-v06 .v06-property-card-attr { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--vios-white-74); } /* === V0.6 layout: hide legacy agent elements === */ /* !important — legacy initAgentCard writes inline style.display='block' (main.js:4148, 4138) which beats the gate without it. Removed when the renderer is deleted in legacy-deletion step 5.B. */ /* --- AgentCard --- */ body.ui-v06 .v06-agent-card { width: 220px; /* mock line 425 */ display: flex; flex-direction: column; } body.ui-v06 .v06-agent-card-header { display: flex; /* mock line 426 */ align-items: center; /* mock line 426 */ gap: 12px; /* mock line 426 */ margin-bottom: 10px; /* mock line 426 */ } body.ui-v06 .v06-agent-photo { width: 52px; /* mock line 427 */ height: 52px; /* mock line 427 */ border-radius: 50%; /* mock line 427 */ flex-shrink: 0; /* mock line 427 */ background: var(--vios-agent-photo-bg); /* mock line 427 */ display: flex; /* mock line 427 */ align-items: center; /* mock line 427 */ justify-content: center; /* mock line 427 */ font-size: 22px; /* mock line 428 */ overflow: hidden; } body.ui-v06 .v06-agent-photo-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } body.ui-v06 .v06-agent-name { font-size: 14px; /* mock line 430 */ font-weight: 500; /* mock line 430 */ letter-spacing: 0.01em; /* mock line 430 */ color: var(--vios-white-92); /* mock line 430 */ line-height: 1.3; /* mock line 430 */ } body.ui-v06 .v06-agent-agency { font-size: 11px; /* mock line 431 */ color: var(--vios-agency-color); /* mock line 431 */ margin-top: 2px; /* mock line 431 */ } body.ui-v06 .v06-agent-rating { font-size: 11px; /* mock line 432 */ color: var(--vios-gold-deep); /* mock line 432: ratingColor = goldDeep */ margin-top: 2px; /* mock line 432 */ } body.ui-v06 .v06-agent-actions { display: flex; /* mock line 447 */ gap: 8px; /* mock line 447 */ margin-top: auto; /* stick to card bottom so it aligns with InspectionCard's CTA when cards equalise via align-items:stretch */ } body.ui-v06 .v06-agent-enquire-btn { flex: 1; /* mock line 448 */ background: var(--vios-gold); /* mock line 448: theme.goldDeep (solid, not gradient) */ color: var(--vios-cta-fg); /* mock line 449 */ border: none; /* mock line 449 */ /* shape from .v06-button-pill (mock 448 height/radius); typography from .v06-button base (mock 449–450 font-size/family/letter-spacing) */ } body.ui-v06 .v06-agent-call-btn { flex: 1; /* mock line 451 */ background: transparent; /* mock line 451 */ color: var(--vios-white-92); /* mock line 451 */ border: 1px solid var(--glass-border); /* mock line 452 */ /* shape from .v06-button-pill (mock 451 height/radius, mock 455 transition); typography from .v06-button base */ } body.ui-v06 .v06-agent-call-btn.is-revealed { font-size: 10px; /* mock line 453: callRevealed fontSize */ font-family: ui-monospace, Menlo, monospace; /* mock line 454 */ letter-spacing: 0.04em; /* mock line 455 */ } /* --- InspectionCard --- */ body.ui-v06 .v06-inspection-card { display: flex; /* mock line 470 */ flex-direction: column; /* mock line 470 */ width: 220px; /* mock line 470 */ position: relative; /* mock line 470 */ } body.ui-v06 .v06-inspection-card[hidden] { display: none; } body.ui-v06 .v06-inspection-card-content { flex: 1; /* mock line 471 */ } body.ui-v06 .v06-inspection-card-eyebrow { font-size: 9px; /* mock line 472 */ color: var(--vios-white-56); /* mock line 472 */ letter-spacing: 0.14em; /* mock line 472 */ text-transform: uppercase; /* mock line 472 */ margin-bottom: 8px; /* mock line 472 */ } body.ui-v06 .v06-inspection-card-slot { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--vios-divider); } body.ui-v06 .v06-inspection-card-slot-day { font-size: 11px; /* mock line 476 */ color: var(--vios-white-56); /* mock line 476 */ letter-spacing: 0.04em; /* mock line 476 */ } body.ui-v06 .v06-inspection-card-slot-time { font-size: 12px; /* mock line 477: default state */ font-weight: 400; /* mock line 477 */ color: var(--vios-white-74); /* mock line 478 */ letter-spacing: 0.02em; /* mock line 478 */ } body.ui-v06 .v06-inspection-card-slot:first-child .v06-inspection-card-slot-time { font-size: 13px; /* first-row emphasis */ font-weight: 500; color: var(--vios-white-92); } /* Override v06-pill defaults so the cal button matches the GhostPill style from Desktop_Standalone.html: full-width, transparent, centered text, no uppercase. */ body.ui-v06 .v06-inspection-card-cal-btn { margin-top: 12px; width: 100%; height: 32px; padding: 0; justify-content: center; text-align: center; background: transparent; text-transform: none; letter-spacing: 0.02em; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } body.ui-v06 .v06-inspection-card-cal-btn:hover { background: var(--vios-list-active-bg, rgba(0,0,0,0.04)); } /* Solid CTA pill for Variation B (By appointment) */ body.ui-v06 .v06-inspection-card-cal-btn.v06-inspection-card-cal-btn-solid { background: var(--vios-gold); border-color: var(--vios-gold); color: var(--vios-cta-fg); /* was the literal — tokenized so the brand ink guardrail applies (#327) */ } body.ui-v06 .v06-inspection-card-cal-btn.v06-inspection-card-cal-btn-solid:hover { filter: brightness(1.06); background: var(--vios-gold); } /* ─── Variation A (Quiet) — register-interest copy */ body.ui-v06 .v06-inspection-quiet-headline { font-size: 13px; color: var(--vios-white-92); letter-spacing: 0.01em; line-height: 1.45; margin-top: 4px; } body.ui-v06 .v06-inspection-quiet-sub { font-size: 11px; color: var(--vios-white-56); letter-spacing: 0.02em; line-height: 1.55; margin-top: 6px; } /* ─── Variation B (By appointment) — badge + body + day pills */ body.ui-v06 .v06-inspection-pills-badgerow { display: flex; justify-content: space-between; align-items: baseline; margin-top: -4px; /* offset existing eyebrow margin so they share the row visually */ margin-bottom: 8px; } body.ui-v06 .v06-inspection-pills-badge { font-size: 9px; color: var(--vios-gold-deep); letter-spacing: 0.10em; text-transform: uppercase; } body.ui-v06 .v06-inspection-pills-sub { font-size: 12px; color: var(--vios-white-74); letter-spacing: 0.01em; line-height: 1.5; margin-bottom: 10px; } body.ui-v06 .v06-inspection-pills-row { display: flex; gap: 6px; } body.ui-v06 .v06-inspection-pill { flex: 1; padding: 7px 4px; border-radius: 10px; background: transparent; border: 1px solid var(--glass-border); color: var(--vios-white-92); font-size: 11px; font-family: inherit; letter-spacing: 0.02em; cursor: pointer; transition: all 0.15s; } body.ui-v06 .v06-inspection-pill:hover { border-color: var(--vios-gold); } body.ui-v06 .v06-inspection-pill.is-active { background: var(--vios-gold-faint); border-color: var(--vios-gold); color: var(--vios-gold-deep); } /* ─── Variation C (Notify-me) — Watching dot */ body.ui-v06 .v06-inspection-watching-cell { display: inline-flex; align-items: center; } body.ui-v06 .v06-inspection-watching-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--vios-gold); margin-right: 6px; } /* When the card is in a variant, the underline emphasis on slot:first-child is only meaningful for 'scheduled' (real upcoming time). Suppress for variants that rebuild the slot rows for a different purpose (notify uses faux-rows). */ body.ui-v06 .v06-inspection-card.v06-inspection-variant-notify .v06-inspection-card-slot:first-child .v06-inspection-card-slot-time { text-decoration: none; } body.ui-v06 .v06-inspection-card-empty-msg { font-size: 12px; line-height: 1.45; color: var(--vios-white-74); padding: 4px 0; } body.ui-v06 .v06-ds-inspect-empty-msg { font-size: 13px; line-height: 1.4; color: var(--vios-white-74); margin-bottom: 12px; } body.ui-v06 .v06-ds-inspect-request-btn { width: 100%; } /* === V0.6 Calendar picker — in-card dropdown (matches Desktop_Standalone mock) === */ body.ui-v06 .v06-inspection-card-cal-btn.is-active { color: var(--vios-gold-deep); border-color: var(--vios-gold); } body.ui-v06 .v06-cal-picker { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; background: var(--vios-panel-strong); border: 1px solid var(--glass-border); border-radius: 14px; backdrop-filter: blur(20px) saturate(1.05); -webkit-backdrop-filter: blur(20px) saturate(1.05); box-shadow: var(--vios-panel-shadow-strong); overflow: hidden; pointer-events: auto; font-family: var(--ui-sans); } body.ui-v06 .v06-cal-picker-kicker { font-size: 9px; color: var(--vios-white-56); letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 12px 6px; } body.ui-v06 .v06-cal-picker-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: transparent; border: none; border-top: 1px solid var(--vios-divider); color: var(--vios-white-92); font-size: 12px; font-family: inherit; text-align: left; cursor: pointer; transition: background 0.12s; } body.ui-v06 .v06-cal-picker-row:hover { background: var(--vios-list-active-bg, rgba(0,0,0,0.05)); } body.ui-v06 .v06-cal-picker-back { border-top: none; } body.ui-v06 .v06-cal-picker-back-chev { color: var(--vios-white-56); font-size: 11px; } body.ui-v06 .v06-cal-picker-back-summary { flex: 1; color: var(--vios-white-74); } body.ui-v06 .v06-cal-picker-day { flex: 1; color: var(--vios-white-92); } body.ui-v06 .v06-cal-picker-time { color: var(--vios-gold-deep); font-weight: 500; margin-right: 4px; } body.ui-v06 .v06-cal-picker-chev { color: var(--vios-white-56); font-size: 10px; } body.ui-v06 .v06-cal-picker-icon { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; background: var(--vios-input-bg); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--vios-white-74); } body.ui-v06 .v06-cal-picker-label { color: var(--vios-white-92); } /* === V0.6 layout: hide legacy top-right chrome === */ body:not(.ui-v06) #v06TopRight { display: none; } /* --- TopRightActions --- */ body.ui-v06 #v06TopRight { position: fixed; /* mock line 521: anchored to viewport */ top: 18px; /* mock line 521 */ right: 18px; /* mock line 521 */ padding: 5px 6px; /* mock line 522 */ display: inline-flex; /* mock line 522 */ align-items: center; /* mock line 522 */ gap: 0; /* mock line 522 */ z-index: 12; pointer-events: auto; } body.ui-v06 .v06-top-right-share { border: 1px solid var(--glass-border); /* mock line 524 */ background: var(--vios-gold-faint); /* mock line 524: theme.pillInactiveBg */ color: var(--vios-white-92); /* mock line 524 */ gap: 7px; /* mock line 527 — overrides .v06-button base gap 8 */ /* shape from .v06-button-pill-sm (mock 523 height/padding/radius, mock 527 transition); typography from .v06-button base (mock 525–526) */ } body.ui-v06 .v06-top-right-divider { width: 1px; /* mock line 530 */ height: 18px; /* mock line 530 */ background: var(--glass-border); /* mock line 530 */ margin: 0 8px; /* mock line 530 */ flex-shrink: 0; /* mock line 530 */ } body.ui-v06 .v06-top-right-fullscreen { width: 30px; /* mock line 531 */ height: 30px; /* mock line 531 */ border-radius: 8px; /* mock line 531 */ border: none; /* mock line 531 */ background: transparent; /* mock line 531 */ color: var(--vios-white-56); /* mock line 532 */ cursor: pointer; /* mock line 532 */ display: flex; /* mock line 532 */ align-items: center; /* mock line 532 */ justify-content: center; /* mock line 532 */ } body.ui-v06 .v06-icon-share, body.ui-v06 .v06-icon-fullscreen { display: inline-flex; align-items: center; justify-content: center; } /* --- DPad --- */ body:not(.ui-v06) #v06DPad { display: none; } body.ui-v06 #v06DPad { position: fixed; /* mock line 1000 */ bottom: 22px; /* mock line 1000 */ right: 18px; /* mock line 1000 */ z-index: 12; display: grid; /* mock line 1001 */ grid-template-columns: repeat(3, 44px); /* mock line 1001 */ grid-template-rows: repeat(2, 44px); /* mock line 1001 */ gap: 4px; /* mock line 1001 */ user-select: none; /* mock line 1001 */ pointer-events: auto; } body.ui-v06 .v06-dpad-btn { width: 44px; /* mock line 1005 */ height: 44px; /* mock line 1005 */ border-radius: 10px; /* mock line 1005 */ background: var(--glass-bg); /* mock line 1006: theme.panel */ backdrop-filter: blur(8px); /* mock line 1007 */ -webkit-backdrop-filter: blur(8px); /* mock line 1007 */ border: 1px solid var(--glass-border); /* mock line 1007 */ color: var(--vios-white-92); /* mock line 1008 */ cursor: pointer; /* mock line 1008 */ display: flex; /* mock line 1009 */ align-items: center; /* mock line 1009 */ justify-content: center; /* mock line 1009 */ padding: 0; /* mock line 1010 */ touch-action: none; /* mock line 1010 */ transition: background 0.08s ease; /* mock line 1010 */ } body.ui-v06 .v06-dpad-btn:active { background: var(--vios-panel-strong); /* mock line 1006: pressed → panelStrong */ } body.ui-v06 .v06-dpad-btn span { font-size: 18px; /* mock line 1011 */ line-height: 1; /* mock line 1011 */ } body.ui-v06 .v06-dpad-btn[data-v06-dpad-dir="up"] { grid-column: 2; grid-row: 1; } /* mock line 989 */ body.ui-v06 .v06-dpad-btn[data-v06-dpad-dir="left"] { grid-column: 1; grid-row: 2; } /* mock line 990 */ body.ui-v06 .v06-dpad-btn[data-v06-dpad-dir="down"] { grid-column: 2; grid-row: 2; } /* mock line 991 */ body.ui-v06 .v06-dpad-btn[data-v06-dpad-dir="right"] { grid-column: 3; grid-row: 2; } /* mock line 992 */ body.ui-v06.viewer-idle #v06DPad { opacity: 0.2; transition: opacity 0.32s ease; } /* --- Move joystick (mobile-only, right = "legs") --- Replaces the single hold-to-walk ForwardButton. A glass base (.v06-stick) with a draggable knob (.v06-stick-thumb); JS (virtual-joystick.js) feeds the analog vector each frame. Looking is drag-to-look on the open canvas. */ body:not(.ui-v06) .v06-stick { display: none; } body.ui-v06:not(.is-touch) .v06-stick { display: none; } body.ui-v06.is-touch .v06-stick { position: fixed; bottom: 94px; z-index: 12; /* sits above the bottom RoomNavbar */ width: 94px; height: 94px; border-radius: 50%; /* 10% smaller than the original 104px */ background: var(--glass-bg-faint); /* transparent, no blur — just a slight dark shade */ border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); color: var(--vios-white-92); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; transition: background 0.12s ease, box-shadow 0.12s ease; pointer-events: auto; } body.ui-v06.is-touch .v06-stick-move { right: 16px; } /* Keep the joystick base CONSISTENT in use — same near-transparent fill, no flip. */ body.ui-v06.is-touch .v06-stick.is-active { background: var(--glass-bg-faint); box-shadow: 0 2px 10px rgba(0,0,0,0.18); } /* The draggable knob — centred at rest; JS writes translate() to move it. */ body.ui-v06.is-touch .v06-stick-thumb { position: absolute; top: 50%; left: 50%; margin: -16.5px 0 0 -16.5px; /* half of 33px → centred (25% smaller) */ width: 33px; height: 33px; border-radius: 50%; /* was 44px — 25% smaller */ background: var(--vios-panel-strong); border: 1px solid var(--glass-border); box-shadow: 0 2px 8px rgba(0,0,0,0.18); pointer-events: none; /* base owns the pointer */ will-change: transform; } /* Thumb stays its white fill in use too (no gold flip) — consistent look. */ body.ui-v06.viewer-idle .v06-stick { opacity: 0.2; transition: opacity 0.32s ease; } /* Hide legacy d-pad globally under V0.6 (V0.6 has its own #v06DPad inside #topBar). The existing rule below covered only touch. !important defends against any inline style.* writes — none in current main.js but the legacy d-pad was historically positioned by JS at 1310-1312. */ body.ui-v06 #dpad { display: none !important; } body.ui-v06.is-touch #dpad { display: none; } /* --- Mobile HelpButton --- */ /* The "?" help toggle now lives INSIDE the mobile TopBar, immediately right of Share (matching its glass look). See `.v06-mtb-help` near the TopBar rules below. The old free-floating bottom-left circle was removed. */ /* === V0.6 layout: hide legacy room nav under V0.6 === */ /* --- Mobile TopBar (collapsed property summary) --- */ body:not(.ui-v06) .v06-mobile-topbar { display: none; } body.ui-v06:not(.is-touch) .v06-mobile-topbar { display: none; } body.ui-v06.is-touch .v06-mobile-topbar[hidden] { display: none; } body.ui-v06.is-touch .v06-mobile-topbar { position: fixed; top: 12px; /* was 56px — mock used 56 for iOS status-bar clearance, no longer needed in real mobile viewport */ left: 12px; /* anchored to viewport left edge with 12px margin */ width: calc(100% - 24px); /* full width minus 12px each side, capped by max-width below */ max-width: 366px; /* widened from 320 so Share+Measure+Help don't shrink the summary card (keeps it at its original ~228px on phones >=390px wide) */ z-index: 30; /* unchanged — mock line 325 */ display: flex; gap: 8px; align-items: stretch; /* unchanged — mock line 326 */ pointer-events: auto; /* parent #topBar has pointer-events:none */ } body.ui-v06.is-touch .v06-mtb-summary-wrap { flex: 1; min-width: 0; position: relative; } body.ui-v06.is-touch .v06-mtb-summary { padding: 9px 14px; /* mock line 329 */ cursor: pointer; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: center; } body.ui-v06.is-touch .v06-mtb-shimmer { position: absolute; inset: 0; border-radius: 16px; pointer-events: none; z-index: 1; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.13) 50%, transparent 60%); background-size: 200% 100%; /* mock lines 61–64: card-shimmer */ opacity: 0; } body.ui-v06.is-touch .v06-mtb-summary.is-shimmering .v06-mtb-shimmer { opacity: 1; animation: v06-mobile-card-shimmer 1.1s ease forwards; } body.ui-v06.is-touch .v06-mtb-tap-btn { display: flex; flex-direction: column; cursor: pointer; width: 100%; position: relative; z-index: 2; background: none; border: none; padding: 0; font-family: inherit; color: inherit; text-align: left; } body.ui-v06.is-touch .v06-mtb-title-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; /* allow address to shrink + ellipsis below intrinsic width */ } body.ui-v06.is-touch .v06-mtb-address { font-size: 15px; font-weight: 500; letter-spacing: 0.01em; /* mock line 343 */ color: var(--vios-white-92); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; /* required for ellipsis inside flex row */ } body.ui-v06.is-touch .v06-mtb-price { font-size: 13px; font-weight: 500; letter-spacing: 0.01em; /* mock line 346 */ color: var(--vios-gold-deep); flex-shrink: 0; } body.ui-v06.is-touch .v06-mtb-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; min-width: 0; /* allow attrs to shrink + ellipsis below intrinsic width */ } body.ui-v06.is-touch .v06-mtb-attrs { font-size: 10px; color: var(--vios-white-56); letter-spacing: 0.04em; /* mock line 351 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; /* required for ellipsis inside flex row */ } body.ui-v06.is-touch .v06-mtb-chevron { flex-shrink: 0; opacity: 0.9; color: var(--vios-gold-deep); display: block; /* mock line 356–360 */ } body.ui-v06.is-touch .v06-mtb-chevron.is-bouncing { animation: v06-mobile-chevron-bounce 0.6s ease-in-out 2; } body.ui-v06.is-touch .v06-mtb-hint { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; color: var(--vios-white-92); pointer-events: none; z-index: 50; text-transform: uppercase; opacity: 1; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); /* readable over light backgrounds in the 3D scene */ } body.ui-v06.is-touch .v06-mtb-hint.is-visible { /* legacy fade-in animation no longer needed — hint is always visible */ } body.ui-v06.is-touch .v06-mtb-share { width: 38px; display: flex; align-items: center; justify-content: center; /* mock line 381 */ } body.ui-v06.is-touch .v06-mtb-share-btn { width: 100%; height: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--vios-white-92); padding: 0; } /* Mobile Help "?" — sibling of Share in the TopBar, identical glass look. */ body.ui-v06.is-touch .v06-mtb-help { width: 38px; display: flex; align-items: center; justify-content: center; } body.ui-v06.is-touch .v06-mtb-help-btn { width: 100%; height: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--vios-white-92); padding: 0; } /* Mobile Measure — sits between Share and Help, same glass look. */ body.ui-v06.is-touch .v06-mtb-measure { width: 38px; display: flex; align-items: center; justify-content: center; } body.ui-v06.is-touch .v06-mtb-measure-btn { width: 100%; height: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--vios-white-92); padding: 0; transition: color 0.16s ease; } body.ui-v06.is-touch .v06-mtb-measure-btn.is-active { color: var(--vios-gold); } @keyframes v06-mobile-card-shimmer { 0% { background-position: -200% center; } /* mock lines 43–45: cardShimmer */ 100% { background-position: 200% center; } } @keyframes v06-mobile-chevron-bounce { 0%,100% { transform: translateX(0); } /* mock lines 52–55: chevronBounce */ 50% { transform: translateX(3px); } } @keyframes v06-mobile-hint-fade { 0% { opacity: 0; transform: translateX(-50%) translateY(3px); } /* mock lines 46–51: hintFade */ 20% { opacity: 1; transform: translateX(-50%) translateY(0); } 70% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-2px); } } /* --- Mobile RoomNavbar --- */ body:not(.ui-v06) #v06MobileRoomNavbar { display: none; } body.ui-v06:not(.is-touch) #v06MobileRoomNavbar { display: none; } body.ui-v06.is-touch #v06RoomNavbar { display: none; } body.ui-v06.is-touch #v06MobileRoomNavbar[hidden] { display: none; } body.ui-v06.is-touch #v06MobileRoomNavbar { position: fixed; bottom: 8px; left: 12px; right: 12px; z-index: 12; /* nudged closer to the bottom edge */ pointer-events: auto; /* parent #topBar has pointer-events:none */ } body.ui-v06.is-touch .v06-mrn-bar { padding: 6px; /* Column of [floors row?, main controls row] — see the desktop .v06-room-navbar-bar note ([Floor & Area Switcher]). */ display: flex; flex-direction: column; align-items: stretch; gap: 4px; } body.ui-v06.is-touch .v06-mrn-main { display: flex; align-items: stretch; gap: 4px; /* mock line 870 */ min-width: 0; } body.ui-v06.is-touch .v06-mrn-prev, body.ui-v06.is-touch .v06-mrn-next { width: 36px; height: 44px; border-radius: 9px; /* mock line 871 */ background: var(--vios-gold-faint); border: 1px solid var(--glass-border); /* mock line 872 */ color: var(--vios-white-92); cursor: pointer; font-size: 16px; /* mock line 873 */ display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body.ui-v06.is-touch .v06-mrn-center { flex: 1; height: 44px; border-radius: 9px; padding: 0 12px; /* mock line 876 */ background: transparent; border: 1px solid transparent; cursor: pointer; font-family: 'Josefin Sans', sans-serif; display: flex; flex-direction: column; justify-content: center; /* mock line 880 */ gap: 1px; transition: all 0.15s; text-align: center; align-items: center; min-width: 0; /* allow inner room-row + room-name to ellipsize when bar is crowded */ overflow: hidden; } body.ui-v06.is-touch .v06-mrn-center.is-active { background: var(--vios-list-active-bg); border-color: var(--vios-gold); /* mock line 878 */ } body.ui-v06.is-touch .v06-mrn-floor { font-size: 9px; font-weight: 500; letter-spacing: 0.16em; /* mock line 882 */ text-transform: uppercase; color: var(--vios-white-56); } body.ui-v06.is-touch .v06-mrn-room-row { font-size: 14px; font-weight: 500; letter-spacing: 0.01em; /* mock line 884 */ color: var(--vios-white-92); line-height: 1.1; display: flex; align-items: center; gap: 6px; /* mock line 886 */ min-width: 0; /* propagate ellipsis trigger from .v06-mrn-center */ max-width: 100%; overflow: hidden; } body.ui-v06.is-touch .v06-mrn-room { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } body.ui-v06.is-touch .v06-mrn-center.is-active .v06-mrn-room-row { color: var(--vios-gold-deep); } /* Compact exploration progress under the room text — sits in the center button's spare vertical space so the bar height is unchanged. */ body.ui-v06.is-touch .v06-mrn-explore { margin-top: 3px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; } body.ui-v06.is-touch .v06-mrn-explore[hidden] { display: none; } body.ui-v06.is-touch .v06-mrn-explore-count { font-size: 9px; font-weight: 500; letter-spacing: 0.04em; line-height: 1; color: var(--vios-white-56); font-variant-numeric: tabular-nums; } body.ui-v06.is-touch .v06-mrn-explore-track { width: 56px; height: 3px; border-radius: 999px; background: var(--vios-gold-faint); overflow: hidden; } body.ui-v06.is-touch .v06-mrn-explore-fill { display: block; height: 100%; width: 0%; border-radius: 999px; background: var(--vios-gold); transition: width 0.36s cubic-bezier(0.22, 0.61, 0.36, 1); } body.ui-v06.is-touch .v06-mrn-chevron { font-size: 10px; opacity: 0.7; transition: transform 0.15s; } body.ui-v06.is-touch .v06-mrn-center.is-active .v06-mrn-chevron { transform: rotate(180deg); } body.ui-v06.is-touch .v06-mrn-list { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; /* mock line 847 */ padding: 8px; max-height: 280px; overflow-y: auto; /* mock line 848 */ } body.ui-v06.is-touch .v06-mrn-list[hidden] { display: none; } /* The opened room list must be the front-most mobile surface: lift the whole navbar stacking context above the joystick / DPad / feature rail (z 12–13). */ body.ui-v06.is-touch #v06MobileRoomNavbar:has(.v06-mrn-list:not([hidden])) { z-index: 40; } body.ui-v06.is-touch .v06-mrn-list-floor { font-size: 9px; font-weight: 500; letter-spacing: 0.16em; /* mock line 852 */ text-transform: uppercase; color: var(--vios-white-56); padding: 8px 10px 4px; } body.ui-v06.is-touch .v06-mrn-list-room { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 8px; /* mock line 860 */ color: var(--vios-white-74); font-size: 13px; cursor: pointer; letter-spacing: 0.01em; } body.ui-v06.is-touch .v06-mrn-list-room.is-active { background: var(--vios-list-active-bg); /* mock line 861 */ color: var(--vios-gold-deep); /* mock line 862 */ } /* Combined list: progress header + per-room visited ticks (mirrors desktop popover). */ body.ui-v06.is-touch .v06-mrn-list-head { font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vios-white-56); padding: 6px 10px 8px; } body.ui-v06.is-touch .v06-mrn-list-room-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.ui-v06.is-touch .v06-mrn-list-room-tick { flex-shrink: 0; color: var(--vios-gold); font-size: 12px; opacity: 0; } body.ui-v06.is-touch .v06-mrn-list-room.is-visited .v06-mrn-list-room-tick { opacity: 1; } body.ui-v06.is-touch .v06-mrn-list-room.is-visited:not(.is-active) .v06-mrn-list-room-label { color: var(--vios-white-56); } body.ui-v06.viewer-idle #v06MobileRoomNavbar { opacity: 0.2; transition: opacity 0.32s ease; } /* Kill accidental double-tap-to-zoom on the bottom navbar (rapid prev/next taps read as a double-tap). `manipulation` keeps panning + pinch-zoom but drops the double-tap/long-tap gestures; it covers the child prev/next buttons too via ancestor touch-action intersection. */ body.ui-v06 #v06MobileRoomNavbar, body.ui-v06 #v06RoomNavbar { touch-action: manipulation; } /* --- RoomNavbar --- */ body:not(.ui-v06) #v06RoomNavbar { display: none; } body.ui-v06 #v06RoomNavbar { position: fixed; /* mock line 1060 */ bottom: 22px; /* mock line 1060 */ left: 50%; /* mock line 1060 */ transform: translateX(-50%); /* mock line 1060 */ z-index: 12; pointer-events: auto; } body.ui-v06 #v06RoomNavbar[hidden] { display: none; } body.ui-v06 .v06-room-navbar-bar { padding: 8px 10px; /* mock line 1062 */ /* Column of [floors row?, main controls row] — the floors row ([Floor & Area Switcher]) stretches to the main row's width. With no floors row this renders identically to the old single-row bar. */ display: flex; flex-direction: column; align-items: stretch; gap: 8px; /* Chrome's shrink-to-fit under-measures a column flex whose row child contains flexible items (~16px short -> the Guided-tour button overflowed the capsule); width: max-content sizes the bar to the controls row exactly. max-width still clamps on narrow windows and the row's flex-shrink takes over from there. */ width: max-content; position: relative; /* mock line 1061 */ max-width: calc(100vw - 32px); /* never overflow the viewport on desktop */ } body.ui-v06 .v06-room-navbar-main { display: flex; /* mock line 1062 */ align-items: center; /* mock line 1062 */ gap: 8px; /* mock line 1062 */ min-width: 0; } body.ui-v06 .v06-room-navbar-current { padding: 0 8px; /* mock line 1063 */ min-width: 130px; /* design 1063 had 180 as a min for short labels — dropped to 130 so longer next-room names get the freed bar space inside their pill */ max-width: 220px; overflow: hidden; } body.ui-v06 .v06-room-navbar-floor { font-size: 9px; /* mock line 1064 */ font-weight: 500; /* mock line 1064 */ letter-spacing: 0.16em; /* mock line 1064 */ text-transform: uppercase; /* mock line 1064 */ color: var(--vios-white-56); /* mock line 1064 */ } body.ui-v06 .v06-room-navbar-room { font-size: 17px; /* mock line 1065 */ font-weight: 500; /* mock line 1065 */ letter-spacing: 0.01em; /* mock line 1065 */ color: var(--vios-white-92); /* mock line 1065 */ margin-top: 2px; /* mock line 1065 */ line-height: 1.1; /* mock line 1065 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.ui-v06 .v06-room-navbar-divider { width: 1px; /* mock line 1031 */ height: 28px; /* mock line 1031 */ background: var(--vios-divider); /* mock line 1031 */ flex-shrink: 0; /* mock line 1031 */ } body.ui-v06 .v06-room-navbar-prev { height: 34px; /* mock line 1037 */ border-radius: 10px; /* mock line 1038 */ border: 1px solid var(--glass-border); /* mock line 1038 */ background: var(--vios-gold-faint); /* mock line 1039 */ color: var(--vios-white-92); /* mock line 1040 */ font-size: 13px; /* mock line 1041 */ cursor: pointer; /* mock line 1041 */ font-family: var(--ui-sans); /* mock line 1041 */ letter-spacing: 0.02em; /* mock line 1041 */ display: flex; /* mock line 1042 */ align-items: center; /* mock line 1042 */ justify-content: center; /* mock line 1042 */ gap: 7px; /* mock line 1042 */ transition: all 0.15s; /* mock line 1043 */ flex-shrink: 0; /* mock line 1043 */ } body.ui-v06 .v06-room-navbar-prev { width: 34px; /* mock line 1037: non-wide CtrlBtn */ padding: 0; /* mock line 1037 */ } body.ui-v06 .v06-room-navbar-next { padding: 0 14px; /* match All-rooms button */ height: 34px; /* match All-rooms button */ min-width: 0; /* match All-rooms button (auto width) */ border-radius: 10px; border: 1px solid var(--glass-border); background: var(--vios-gold-faint); cursor: pointer; text-align: left; font-family: var(--ui-sans); display: flex; flex-direction: column; justify-content: center; gap: 0; transition: all 0.15s; flex-shrink: 0; } body.ui-v06 .v06-room-navbar-next-kicker { font-size: 9px; /* match Current-Room floor kicker */ font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vios-white-56); line-height: 1; } body.ui-v06 .v06-room-navbar-next-name { font-size: 13px; /* sized to fit 34px button */ font-weight: 500; letter-spacing: 0.01em; color: var(--vios-white-92); /* match Current-Room name colour */ margin-top: 2px; /* match Current-Room name spacing */ line-height: 1.1; /* match Current-Room name line-height */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } body.ui-v06.viewer-idle #v06RoomNavbar { opacity: 0.2; transition: opacity 0.32s ease; } /* === [Floor & Area Switcher] ============================================ Always-visible floors/areas segment row inside both navbar capsules (VAR C, Figma page 258:2). The row is a full-width FIRST flex line: the bar flex-wraps, the row takes flex-basis:100% and draws the hairline via border-bottom; the existing controls wrap to line two, so the capsule stays ONE panel (one blur, one border, one radius). Segments are injected from floors[] by room-navbar.js. Idle-fade is inherited from the navbar; edit/embed hide is below. */ body.ui-v06 .v06-navbar-floors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 8px 8px; border-bottom: 1px solid var(--vios-divider); } body.ui-v06 .v06-navbar-floors[hidden] { display: none; } body.ui-v06 .v06-navbar-floors-label { font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vios-white-56); padding-right: 4px; flex-shrink: 0; } body.ui-v06 .v06-floor-seg { display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: 9px; background: var(--vios-gold-faint); border: 1px solid var(--glass-border); color: var(--vios-white-74); font-family: var(--ui-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; transition: all 0.15s; white-space: nowrap; } body.ui-v06 .v06-floor-seg:hover { background: var(--vios-list-active-bg); } body.ui-v06 .v06-floor-seg.is-active { background: var(--vios-list-active-bg); border-color: transparent; color: var(--vios-gold-deep); } /* Area segments (type:'tour') read as "takes you somewhere else": ember chip + NE arrow (a rotated →; Josefin Sans has no U+2197 glyph). */ body.ui-v06 .v06-floor-seg-area { background: var(--vios-accent); border-color: var(--vios-accent-border); color: var(--vios-accent-text); } body.ui-v06 .v06-floor-seg-area:hover { background: rgba(var(--vios-gold-deep-rgb), 0.20); } body.ui-v06 .v06-floor-seg-arrow { display: inline-block; font-size: 10px; transform: rotate(-45deg); } body.ui-v06 .v06-floor-seg-divider { width: 1px; height: 16px; background: var(--vios-divider); flex-shrink: 0; margin: 0 2px; } /* You-are-here segments (current floor / current area) are inert tabs: default cursor, no ember hover, and the current area drops its "takes you somewhere else" arrow. */ body.ui-v06 .v06-floor-seg.is-active { cursor: default; } body.ui-v06 .v06-floor-seg-area.is-active:hover { background: var(--vios-list-active-bg); } body.ui-v06 .v06-floor-seg-area.is-active .v06-floor-seg-arrow { display: none; } /* Mobile: same row inside .v06-mrn-bar — tighter metrics, centered. */ body.ui-v06.is-touch .v06-mrn-floors { justify-content: center; padding: 2px 6px 7px; gap: 5px; } body.ui-v06.is-touch .v06-mrn-floors .v06-navbar-floors-label { font-size: 8px; } body.ui-v06.is-touch .v06-mrn-floors .v06-floor-seg { height: 26px; padding: 0 11px; font-size: 11px; } /* The two-row capsule reaches the joystick zone (.v06-stick bottom: 94px) — lift the stick clear while the floors row is visible. */ body.ui-v06.is-touch:has(.v06-mrn-floors:not([hidden])) .v06-stick { bottom: 132px; } /* Hidden wholesale in editor + embed (authoring chrome / frozen embed surface). */ body.ui-v06.edit-mode-active .v06-navbar-floors, body.ui-v06.embed-mode .v06-navbar-floors { display: none; } /* Return pill — shown when this tour was opened from another tour's area segment (?back=, renderV06ReturnPill). Fixed surface inside #topBar => needs its own pointer-events: auto (Critical Rule #4). */ body.ui-v06 .v06-return-pill { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 12; pointer-events: auto; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); backdrop-filter: blur(18px) saturate(1.05); -webkit-backdrop-filter: blur(18px) saturate(1.05); color: var(--vios-white-92); font-family: var(--ui-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: all 0.15s; } body.ui-v06 .v06-return-pill[hidden] { display: none; } body.ui-v06 .v06-return-pill:hover { background: var(--glass-bg-strong); } body.ui-v06 .v06-return-pill-arrow { color: var(--vios-gold-deep); font-size: 13px; } /* Mobile: the top edge belongs to the topbar — sit above the navbar instead. */ body.ui-v06.is-touch .v06-return-pill { top: auto; bottom: calc(76px + var(--safe-bottom)); } body.ui-v06.is-touch:has(.v06-mrn-floors:not([hidden])) .v06-return-pill { bottom: calc(110px + var(--safe-bottom)); } body.ui-v06.viewer-idle .v06-return-pill { opacity: 0.2; transition: opacity 0.32s ease; } body.ui-v06.edit-mode-active .v06-return-pill, body.ui-v06.embed-mode .v06-return-pill { display: none; } /* === V0.6 Exploration Progress chip === */ body.ui-v06 .v06-exploration-wrap { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; } body.ui-v06 .v06-exploration-wrap-desktop { margin: 0 8px 0 4px; } /* Mobile: chip lives INSIDE .v06-mrn-bar between the room display and the tour CTA. Drop the absolute float so it participates in the bar's flex flow. Popover (.v06-exploration-popover) still opens UP because its rule already pins `bottom: calc(100% + 8px)` relative to this wrap. */ body.ui-v06 .v06-exploration-wrap-mobile { position: relative; flex: 0 1 auto; min-width: 0; pointer-events: auto; } body.ui-v06 .v06-exploration-chip { --explored: 0; position: relative; height: 28px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--vios-panel-strong); color: var(--vios-white-92); font: 600 11px/1 var(--ui-sans, inherit); letter-spacing: 0.04em; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: border-color 0.15s ease, transform 0.10s ease, box-shadow 0.20s ease; } body.ui-v06 .v06-exploration-chip[hidden] { display: none; } body.ui-v06 .v06-exploration-chip:hover { border-color: var(--vios-gold); } body.ui-v06 .v06-exploration-chip:active { transform: translateY(1px); } body.ui-v06 .v06-exploration-chip-label { color: var(--vios-white-92); letter-spacing: 0.04em; flex-shrink: 0; } body.ui-v06 .v06-exploration-chip-count { color: var(--vios-gold-deep); font-variant-numeric: tabular-nums; flex-shrink: 0; } body.ui-v06 .v06-exploration-chip-track { position: relative; flex: 1 1 80px; min-width: 64px; height: 6px; border-radius: 3px; background: var(--vios-gold-faint); overflow: hidden; } body.ui-v06 .v06-exploration-chip-fill { display: block; height: 100%; width: 0%; background: var(--vios-gold); border-radius: 3px; transition: width 0.36s cubic-bezier(0.22, 0.61, 0.36, 1); } body.ui-v06 .v06-exploration-chip-pct { color: var(--vios-white-92); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 32px; text-align: right; } body.ui-v06 .v06-exploration-chip.is-complete { border-color: var(--vios-gold); box-shadow: 0 0 0 1px var(--vios-gold) inset; } body.ui-v06 .v06-exploration-chip.is-complete .v06-exploration-chip-count, body.ui-v06 .v06-exploration-chip.is-complete .v06-exploration-chip-pct { color: var(--vios-gold-deep); } /* Mobile compact layout — drop the count text, keep bar + percentage. */ body.ui-v06.is-touch .v06-exploration-chip { height: 26px; padding: 0 10px; gap: 7px; } body.ui-v06.is-touch .v06-exploration-chip-count { display: none; } body.ui-v06.is-touch .v06-exploration-chip-track { flex: 1 1 70px; min-width: 56px; height: 5px; } body.ui-v06.is-touch .v06-exploration-chip-pct { min-width: 28px; font-size: 10px; } /* === Mobile crowding rule === When the guided-tour CTA is visible inside .v06-mrn-bar, the bar is running ~5 controls in a 336–390px viewport. Compress the inline chip so the room name + buttons still fit: - drop the "%" text (keep only the track) - tighten the track to ~50px Driven by CSS `:has()` — purely declarative, no JS state sync. */ body.ui-v06.is-touch .v06-mrn-bar:has(.v06-mrn-tour-btn:not([hidden])) .v06-exploration-chip { padding: 0 8px; gap: 5px; } body.ui-v06.is-touch .v06-mrn-bar:has(.v06-mrn-tour-btn:not([hidden])) .v06-exploration-chip-pct { display: none; } body.ui-v06.is-touch .v06-mrn-bar:has(.v06-mrn-tour-btn:not([hidden])) .v06-exploration-chip-track { flex: 1 1 50px; min-width: 40px; } /* Safety net: hide chip in edit mode regardless of JS visibility flag. During Preview, restore so the operator sees the visitor's view. */ body.ui-v06.edit-mode-active:not(.editor-preview-active) .v06-exploration-chip { display: none; } /* === V0.6 Exploration popover === */ body.ui-v06 .v06-exploration-popover { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 260px; max-width: 300px; max-height: 340px; overflow-y: auto; padding: 6px; border-radius: 12px; background: var(--vios-panel-strong); border: 1px solid var(--glass-border); backdrop-filter: blur(20px) saturate(1.05); -webkit-backdrop-filter: blur(20px) saturate(1.05); z-index: 14; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } body.ui-v06 .v06-exploration-popover[hidden] { display: none; } body.ui-v06 .v06-exploration-popover-head { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vios-white-56, var(--vios-white-74)); padding: 6px 10px 8px; } body.ui-v06 .v06-exploration-popover-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--vios-white-74); font-size: 13px; letter-spacing: 0.01em; transition: background 0.12s ease, color 0.12s ease; } body.ui-v06 .v06-exploration-popover-row.is-clickable { cursor: pointer; } body.ui-v06 .v06-exploration-popover-row.is-clickable:hover { background: var(--vios-list-active-bg); color: var(--vios-gold-deep); } /* Desktop merged "All rooms" popover: floor headers, visited ticks, current row. */ body.ui-v06 .v06-exploration-popover-floor { font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vios-white-56); padding: 6px 10px 4px; } body.ui-v06 .v06-exploration-popover-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.ui-v06 .v06-exploration-popover-row-tick { flex-shrink: 0; color: var(--vios-gold); font-size: 12px; opacity: 0; } body.ui-v06 .v06-exploration-popover-row.is-visited .v06-exploration-popover-row-tick { opacity: 1; } body.ui-v06 .v06-exploration-popover-row.is-visited .v06-exploration-popover-row-label { color: var(--vios-white-56); } body.ui-v06 .v06-exploration-popover-row.is-active { background: var(--vios-list-active-bg); color: var(--vios-gold-deep); } body.ui-v06 .v06-exploration-popover-row.is-active .v06-exploration-popover-row-label { color: var(--vios-gold-deep); } /* --- HelpButton + QuickRefPanel --- */ body:not(.ui-v06) #v06HelpButton { display: none; } body.ui-v06 #v06HelpButton { position: fixed; /* mock line 967 */ bottom: 22px; /* mock line 967 */ left: 18px; /* mock line 967 */ z-index: 12; pointer-events: auto; } body.ui-v06 .v06-help-button-shell { padding: 6px; /* mock line 968 */ position: relative; /* mock line 968 */ } body.ui-v06 .v06-help-button-toggle { border: 1px solid var(--glass-border); /* mock line 971 */ background: var(--vios-gold-faint); /* mock line 972 */ color: var(--vios-white-74); /* mock line 973 */ /* shape from .v06-button-pill (mock 970 height/padding/radius, mock 975 transition); typography from .v06-button base (mock 974–975) */ } body.ui-v06 .v06-help-button-toggle.is-active { border-color: var(--vios-gold); /* mock line 971 — panelOpen */ background: var(--vios-list-active-bg); /* mock line 972 — panelOpen */ color: var(--vios-gold-deep); /* mock line 973 — panelOpen */ } body.ui-v06 .v06-quickref-panel { position: absolute; /* mock line 926 */ bottom: calc(100% + 10px); /* mock line 926 */ left: 0; /* mock line 926 */ width: 270px; /* mock line 926 */ z-index: 50; /* mock line 926 */ background: var(--vios-panel-strong); /* mock line 927 */ border: 1px solid var(--glass-border); /* mock line 927 */ border-radius: 16px; /* mock line 927 */ backdrop-filter: blur(20px) saturate(1.05); /* mock line 928 */ -webkit-backdrop-filter: blur(20px) saturate(1.05); /* mock line 928 */ box-shadow: var(--vios-panel-shadow-strong); /* mock line 928 */ overflow: hidden; /* mock line 928 */ } body.ui-v06 .v06-quickref-panel[hidden] { display: none; } body.ui-v06 .v06-quickref-panel-header { padding: 12px 14px 10px; /* mock line 930 */ border-bottom: 1px solid var(--vios-divider); /* mock line 930 */ } body.ui-v06 .v06-quickref-panel-eyebrow { font-size: 9px; /* mock line 931 */ font-weight: 500; /* mock line 931 */ letter-spacing: 0.18em; /* mock line 931 */ text-transform: uppercase; /* mock line 931 */ color: var(--vios-white-56); /* mock line 931 */ } body.ui-v06 .v06-quickref-panel-list { padding: 4px 0; /* mock line 933 */ } body.ui-v06 .v06-quickref-row { display: flex; /* mock line 935 */ align-items: center; /* mock line 935 */ gap: 12px; /* mock line 935 */ padding: 9px 14px; /* mock line 935 */ } body.ui-v06 .v06-quickref-row + .v06-quickref-row { border-top: 1px solid var(--vios-divider); /* mock line 936 */ } body.ui-v06 .v06-quickref-icon-wrap { width: 46px; /* mock line 937 */ display: flex; /* mock line 937 */ align-items: center; /* mock line 937 */ justify-content: center; /* mock line 937 */ flex-shrink: 0; /* mock line 937 */ } body.ui-v06 .v06-quickref-label { font-size: 12px; /* mock line 941 */ font-weight: 500; /* mock line 941 */ color: var(--vios-white-92); /* mock line 941 */ letter-spacing: 0.01em; /* mock line 941 */ } body.ui-v06 .v06-quickref-desc { font-size: 10px; /* mock line 942 */ color: var(--vios-white-56); /* mock line 942 */ margin-top: 1px; /* mock line 942 */ letter-spacing: 0.01em; /* mock line 942 */ } body.ui-v06 .v06-quickref-mini-dpad { display: grid; /* mock line 880 */ grid-template-columns: repeat(3, 16px); /* mock line 880 */ grid-template-rows: repeat(2, 16px); /* mock line 880 */ gap: 2px; /* mock line 880 */ } body.ui-v06 .v06-quickref-mini-key { width: 16px; /* mock line 882 */ height: 16px; /* mock line 882 */ border-radius: 4px; /* mock line 882 */ background: var(--vios-key-bg); /* mock line 883: T.keyBg */ border: 1px solid var(--vios-key-border); /* mock line 883: T.keyBorder */ color: var(--vios-key-color); /* mock line 883: T.keyColor */ font-size: 9px; /* mock line 883 */ display: flex; /* mock line 884 */ align-items: center; /* mock line 884 */ justify-content: center; /* mock line 884 */ } body.ui-v06 .v06-quickref-mini-key[data-mini-pos="up"] { grid-column: 2; grid-row: 1; } /* mock line 871 */ body.ui-v06 .v06-quickref-mini-key[data-mini-pos="left"] { grid-column: 1; grid-row: 2; } /* mock line 872 */ body.ui-v06 .v06-quickref-mini-key[data-mini-pos="down"] { grid-column: 2; grid-row: 2; } /* mock line 873 */ body.ui-v06 .v06-quickref-mini-key[data-mini-pos="right"] { grid-column: 3; grid-row: 2; } /* mock line 874 */ body.ui-v06 .v06-quickref-mouse-body { fill: var(--vios-mouse-fill); /* mock line 893 */ stroke: var(--vios-mouse-stroke); /* mock line 893 */ stroke-width: 1.2; /* mock line 893 */ } body.ui-v06 .v06-quickref-mouse-btn { fill: var(--vios-mouse-btn); /* mock line 894 */ } body.ui-v06 .v06-quickref-mouse-div { stroke: var(--vios-mouse-div); /* mock line 896 */ stroke-width: 0.8; /* mock line 896 */ } body.ui-v06 .v06-quickref-mouse-wheel { fill: var(--vios-mouse-fill); /* mock line 897 */ stroke: var(--vios-mouse-wheel); /* mock line 897 */ stroke-width: 0.8; /* mock line 897 */ } body.ui-v06 .v06-quickref-rooms-pill { height: 20px; /* mock line 904 */ padding: 0 7px; /* mock line 904 */ border-radius: 5px; /* mock line 904 */ border: 1px solid var(--vios-key-border); /* mock line 904 */ background: var(--vios-key-bg); /* mock line 905 */ display: flex; /* mock line 905 */ align-items: center; /* mock line 905 */ gap: 4px; /* mock line 905 */ color: var(--vios-key-color); /* mock line 905 */ font-size: 9px; /* mock line 905 */ font-family: var(--ui-sans); /* mock line 906 */ } body.ui-v06 .v06-quickref-rooms-icon { font-size: 8px; /* mock line 907 */ } body.ui-v06 .v06-quickref-hotspot-icons { display: flex; /* mock line 914 */ align-items: center; /* mock line 914 */ justify-content: center; /* mock line 914 */ gap: 5px; /* mock line 914 */ } body.ui-v06 .v06-quickref-hotspot-ring { width: 14px; /* mock line 915 */ height: 14px; /* mock line 915 */ border-radius: 50%; /* mock line 915 */ border: 1.5px solid var(--vios-key-border); /* mock line 915 */ background: var(--vios-key-bg); /* mock line 915 */ } body.ui-v06 .v06-quickref-hotspot-ring-active { width: 10px; /* mock line 916 */ height: 10px; /* mock line 916 */ background: transparent; /* mock line 916 */ border: 1.5px solid var(--vios-gold); /* mock line 916 */ box-shadow: 0 0 5px rgba(210, 98, 46, 0.33); /* mock line 916: T.gold + 55 alpha */ } body.ui-v06 .v06-quickref-panel-footer { padding: 10px 14px 12px; /* mock line 947 */ border-top: 1px solid var(--vios-divider); /* mock line 947 */ } body.ui-v06 .v06-quickref-replay { font-size: 11px; /* mock line 949 */ color: var(--vios-white-56); /* mock line 949 */ letter-spacing: 0.01em; /* mock line 949 */ user-select: none; /* mock line 949 */ cursor: pointer; } body.ui-v06 .v06-quickref-replay-link { color: var(--vios-gold-deep); /* mock line 950 */ } body.ui-v06.viewer-idle #v06HelpButton { opacity: 0.2; transition: opacity 0.32s ease; } /* === [First Steps Onboarding] tutorial v2 — ambient prompt trail === Single mid-screen slot, dead-center stage (docs/design-tutorial-v2.md §4.0). No scrim, no modal: the container AND chip bodies are pointer-events:none — only chip BUTTONS opt back in (Critical Rule #4). The centered chip sits exactly where people drag, so its body must pass drags through to the canvas or "drag anywhere to look" dies on the chip. Presentation mode hides the slot (CSS-first pause); trail state survives in first-steps.js. */ body:not(.ui-v06) #v06FirstSteps { display: none; } body.ui-v06 #v06FirstSteps { position: fixed; left: 0; right: 0; top: 50%; transform: translateY(-50%); /* dead-center stage — chips float mid-screen */ z-index: 150; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; } body.ui-v06 #v06FirstSteps[hidden] { display: none; } /* Quickref sheet/popover open → the trail chip yields the stage (module toggles) */ body.ui-v06 #v06FirstSteps.is-suppressed { display: none; } body.presentation-active #v06FirstSteps { display: none; } body.edit-mode-active #v06FirstSteps { display: none; } /* --- Focus dim: while a First Steps CHIP is up (not a nudge toast), fade the surrounding chrome the same way the mobile joystick-movement fade does (transition lives on the elements so both directions are smooth; same 0.12 target). The chrome a coach-mark POINTS AT stays bright: the navbar during the rooms step, the joystick during the mobile walk step. --- */ body.ui-v06 #v06TopLeft, body.ui-v06 #v06TopRight, body.ui-v06 #v06PropertyCard, body.ui-v06 #v06AgentCard, body.ui-v06 #v06InspectionCard, body.ui-v06 #v06RoomNavbar, body.ui-v06 #v06MobileRoomNavbar, body.ui-v06 #v06MobileTopBar, body.ui-v06 #v06FeatureBar .v06-fb-rail, body.ui-v06 #v06HelpButton, body.ui-v06 #v06DPad, body.ui-v06 #v06MoveStick { transition: opacity 0.35s ease; } body.ui-v06:has(#v06FirstSteps:not([hidden]):not(.is-suppressed) > .v06-fs-chip) #v06TopLeft, body.ui-v06:has(#v06FirstSteps:not([hidden]):not(.is-suppressed) > .v06-fs-chip) #v06TopRight, body.ui-v06:has(#v06FirstSteps:not([hidden]):not(.is-suppressed) > .v06-fs-chip) #v06PropertyCard, body.ui-v06:has(#v06FirstSteps:not([hidden]):not(.is-suppressed) > .v06-fs-chip) #v06AgentCard, body.ui-v06:has(#v06FirstSteps:not([hidden]):not(.is-suppressed) > .v06-fs-chip) #v06InspectionCard, body.ui-v06:has(#v06FirstSteps:not([hidden]):not(.is-suppressed) > .v06-fs-chip) #v06MobileTopBar, body.ui-v06:has(#v06FirstSteps:not([hidden]):not(.is-suppressed) > .v06-fs-chip) #v06FeatureBar .v06-fb-rail, body.ui-v06:has(#v06FirstSteps:not([hidden]):not(.is-suppressed) > .v06-fs-chip) #v06HelpButton, body.ui-v06:has(#v06FirstSteps:not([hidden]):not(.is-suppressed) > .v06-fs-chip) #v06DPad { opacity: 0.12; } /* navbar dims too — except while the rooms coach-mark points at it */ body.ui-v06:has(#v06FirstSteps:not([hidden]):not(.is-suppressed):not(.v06-fs-coach-navbar) > .v06-fs-chip) #v06RoomNavbar, body.ui-v06:has(#v06FirstSteps:not([hidden]):not(.is-suppressed):not(.v06-fs-coach-navbar) > .v06-fs-chip) #v06MobileRoomNavbar { opacity: 0.12; } /* joystick dims too — except while the walk coach-mark points at it */ body.ui-v06:has(#v06FirstSteps:not([hidden]):not(.is-suppressed):not(.v06-fs-coach-joystick) > .v06-fs-chip) #v06MoveStick { opacity: 0.12; } body.ui-v06 .v06-fs-chip { pointer-events: none; /* glass body passes drags/clicks to the scene below */ position: relative; width: min(380px, 100%); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: var(--vios-panel-shadow-strong); backdrop-filter: blur(20px) saturate(1.05); -webkit-backdrop-filter: blur(20px) saturate(1.05); padding: 14px 18px; animation: v06-fs-enter 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; } body.ui-v06 .v06-fs-welcome { width: min(420px, 100%); padding: 20px 24px; border-radius: 20px; } body.ui-v06 .v06-fs-chip button { pointer-events: auto; } /* ✕ / Skip / CTA stay clickable */ body.ui-v06 .v06-fs-chip.is-folding { animation: v06-fs-fold 0.32s ease-in both; } body.ui-v06 .v06-fs-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } body.ui-v06 .v06-fs-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vios-white-56); padding-top: 4px; } body.ui-v06 .v06-fs-close { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--glass-border); background: transparent; color: var(--vios-white-74); font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: 'Josefin Sans', sans-serif; } body.ui-v06 .v06-fs-title { font-size: 16px; font-weight: 300; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vios-white-92); margin: 8px 0 6px; } body.ui-v06 .v06-fs-body, body.ui-v06 .v06-fs-instruction { font-size: 13px; line-height: 1.6; color: var(--vios-white-74); } body.ui-v06 .v06-fs-instruction-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; } body.ui-v06 .v06-fs-instruction-row .v06-fs-glyph { flex-shrink: 0; } body.ui-v06 .v06-fs-prompt { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; background: var(--vios-accent); border: 1px solid var(--vios-accent-border); color: var(--vios-accent-text); border-radius: 10px; padding: 7px 12px; font-size: 12px; font-weight: 500; animation: v06-fs-enter 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; } body.ui-v06 .v06-fs-key { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--vios-key-border); background: var(--vios-key-bg); color: var(--vios-white-92); font-size: 12px; font-weight: 500; } body.ui-v06 .v06-fs-hint { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--vios-white-56); animation: v06-fs-enter 0.24s ease both; } body.ui-v06 .v06-fs-hint[hidden] { display: none; } body.ui-v06 .v06-fs-affirm { margin: 10px 0 2px; font-size: 13px; font-weight: 500; color: var(--vios-gold-deep); animation: v06-fs-enter 0.12s ease both; } body.ui-v06 .v06-fs-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; } body.ui-v06 .v06-fs-rail { display: flex; gap: 4px; } body.ui-v06 .v06-fs-seg { width: 20px; height: 3px; border-radius: 999px; background: var(--vios-divider); transition: background 0.3s ease; } body.ui-v06 .v06-fs-seg.is-filled { background: var(--vios-gold); } body.ui-v06 .v06-fs-seg.is-filled.is-skip { opacity: 0.35; } /* passed, not earned (§4.5) */ body.ui-v06 .v06-fs-seg.is-current { background: var(--vios-gold); animation: v06-fs-breathe 1.6s ease-in-out infinite alternate; } body.ui-v06 .v06-fs-skip { background: transparent; border: none; cursor: pointer; padding: 2px 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--vios-white-56); font-family: 'Josefin Sans', sans-serif; } body.ui-v06 .v06-fs-skip:hover { text-decoration: underline; } body.ui-v06 .v06-fs-btn { cursor: pointer; font-family: 'Josefin Sans', sans-serif; border-radius: 999px; letter-spacing: 0.03em; } body.ui-v06 .v06-fs-btn-ack { height: 30px; padding: 0 16px; border: 1px solid var(--glass-border); background: var(--vios-gold-faint); color: var(--vios-white-74); font-size: 11px; font-weight: 500; } body.ui-v06 .v06-fs-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; } body.ui-v06 .v06-fs-btn-primary { height: 36px; padding: 0 22px; background: var(--vios-pill-active-bg); border: 1px solid var(--vios-gold); color: var(--vios-white-92); font-size: 13px; font-weight: 500; } body.ui-v06 .v06-fs-btn-text { background: transparent; border: none; padding: 0 4px; color: var(--vios-gold-deep); font-size: 12px; font-weight: 500; } body.ui-v06 .v06-fs-caret { position: absolute; bottom: -6px; left: 50%; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg); background: var(--glass-bg); border-right: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); animation: v06-fs-caret-bob 1.2s ease-in-out 3; } body.ui-v06.is-touch .v06-fs-coach-joystick .v06-fs-caret { left: auto; right: 40px; margin-left: 0; } body.ui-v06 .v06-fs-toast { pointer-events: none; /* no handlers on toasts — never eat a mid-look drag */ padding: 10px 16px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); backdrop-filter: blur(16px) saturate(1.05); -webkit-backdrop-filter: blur(16px) saturate(1.05); font-size: 12px; color: var(--vios-white-74); animation: v06-fs-enter 0.2s ease both; } /* Glyphs */ body.ui-v06 .v06-fs-glyph { display: flex; align-items: center; justify-content: center; } body.ui-v06 .v06-fs-glyph-line { stroke: var(--vios-white-56); fill: none; stroke-width: 1.5; } body.ui-v06 .v06-fs-glyph-accent { stroke: var(--vios-gold); fill: none; stroke-width: 1.5; stroke-linecap: round; } body.ui-v06 .v06-fs-glyph-accent-fill { fill: var(--vios-gold); } body.ui-v06 .v06-fs-glyph-ring { position: relative; width: 32px; height: 32px; } body.ui-v06 .v06-fs-ring-outer { position: absolute; inset: 0; border: 1.5px solid var(--vios-gold); border-radius: 50%; opacity: 0.3; animation: v06-fs-ring-pulse 1.8s ease-in-out infinite; } body.ui-v06 .v06-fs-ring-inner { position: absolute; inset: 8px; border: 1.5px solid var(--vios-gold); border-radius: 50%; box-shadow: 0 0 8px rgba(var(--vios-gold-deep-rgb), 0.3); } /* Help pill micro-rail + one-shot pulse (the House Keys graft) */ body.ui-v06 .v06-help-pill-rail { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: 1px; } body.ui-v06 .v06-help-pill-rail[hidden] { display: none; } body.ui-v06 .v06-help-pill-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--glass-border); } body.ui-v06 .v06-help-pill-dot.is-filled { background: var(--vios-gold); } body.ui-v06 .v06-help-button-toggle.is-pulsing { animation: v06-fs-pill-pulse 0.6s ease-in-out; border-color: var(--vios-gold); } /* Quickref per-skill ticks */ body.ui-v06 .v06-quickref-tick { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-left: auto; border: 1.5px solid var(--glass-border); position: relative; } body.ui-v06 .v06-quickref-tick.is-done { background: var(--vios-gold); border-color: var(--vios-gold); } body.ui-v06 .v06-quickref-tick.is-done::after { content: '\2713'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #fffefc; } /* Mobile quickref bottom sheet (replaces the old 4-step mobile help) */ body:not(.ui-v06) .v06-mobile-quickref { display: none; } body.ui-v06:not(.is-touch) .v06-mobile-quickref { display: none; } body.ui-v06.is-touch .v06-mobile-quickref[hidden] { display: none; } body.ui-v06.is-touch .v06-mobile-quickref { display: contents; } body.ui-v06.is-touch .v06-mobile-quickref-backdrop { position: fixed; inset: 0; z-index: 110; background: var(--vios-scrim); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); pointer-events: auto; /* parent #topBar has pointer-events:none */ } body.ui-v06.is-touch .v06-mobile-quickref-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 111; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom: none; pointer-events: auto; backdrop-filter: blur(22px) saturate(1.08); -webkit-backdrop-filter: blur(22px) saturate(1.08); box-shadow: var(--glass-shadow); padding: 12px 20px 26px; animation: v06-mobile-sheet-up 0.32s cubic-bezier(0.32,0.72,0.21,1) both; } body.ui-v06.is-touch .v06-mobile-quickref-handle { width: 36px; height: 4px; border-radius: 999px; background: var(--glass-border); margin: 0 auto 12px; } body.ui-v06.is-touch .v06-mobile-quickref-header { display: flex; justify-content: space-between; align-items: center; padding: 0 14px 6px; } body.ui-v06.is-touch .v06-mobile-quickref-close { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--glass-border); color: var(--vios-white-74); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; line-height: 1; flex-shrink: 0; } body.ui-v06.is-touch .v06-mobile-quickref-sheet .v06-quickref-row { padding: 12px 14px; } body.ui-v06.is-touch .v06-mobile-quickref-sheet .v06-quickref-panel-footer { padding: 12px 14px 0; } /* Motion (§4.6) */ @keyframes v06-fs-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes v06-fs-fold { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.9) translateY(24px); } } @keyframes v06-fs-breathe { from { opacity: 0.45; } to { opacity: 0.9; } } @keyframes v06-fs-caret-bob { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(2px, 2px); } } @keyframes v06-fs-ring-pulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 0.15; } } @keyframes v06-fs-pill-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { body.ui-v06 .v06-fs-chip, body.ui-v06 .v06-fs-prompt, body.ui-v06 .v06-fs-hint, body.ui-v06 .v06-fs-affirm, body.ui-v06 .v06-fs-toast { animation: v06-fs-reduced-fade 0.12s ease both; } body.ui-v06 .v06-fs-chip.is-folding { animation: none; opacity: 0; } body.ui-v06 .v06-fs-seg { transition: none; } body.ui-v06 .v06-fs-seg.is-current { animation: none; opacity: 0.9; } body.ui-v06 .v06-fs-caret { animation: none; } body.ui-v06 .v06-fs-ring-outer { animation: none; opacity: 0.6; } body.ui-v06 .v06-help-button-toggle.is-pulsing { animation: none; } body.ui-v06.is-touch .v06-mobile-quickref-sheet { animation: none; } } @keyframes v06-fs-reduced-fade { from { opacity: 0; } to { opacity: 1; } } /* === V0.6 Mobile: DetailSheet === */ body:not(.ui-v06) #v06DetailSheetBackdrop, body:not(.ui-v06) #v06DetailSheet { display: none; } #v06DetailSheetBackdrop[hidden], #v06DetailSheet[hidden] { display: none; } #v06DetailSheetBackdrop { position: fixed; inset: 0; z-index: 100; background: var(--vios-scrim); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); pointer-events: auto; /* parent #topBar has pointer-events:none — sheet must explicitly receive events */ } #v06DetailSheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 101; background: var(--vios-panel-strong); border-top-left-radius: 24px; border-top-right-radius: 24px; border: 1px solid var(--glass-border); border-bottom: none; backdrop-filter: blur(22px) saturate(1.08); -webkit-backdrop-filter: blur(22px) saturate(1.08); box-shadow: var(--vios-sheet-shadow); max-height: 78%; display: flex; flex-direction: column; padding-bottom: 26px; animation: v06-mobile-sheet-up 0.32s cubic-bezier(0.32,0.72,0.21,1) both; pointer-events: auto; /* parent #topBar has pointer-events:none — sheet must explicitly receive events */ } @keyframes v06-mobile-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .v06-ds-handle-row { display: flex; justify-content: center; padding: 8px 0 4px; flex-shrink: 0; } .v06-ds-handle { width: 38px; height: 4px; border-radius: 4px; background: var(--glass-border); } .v06-ds-header { padding: 6px 20px 14px; flex-shrink: 0; } .v06-ds-eyebrow { font-size: 10px; color: var(--vios-white-74); letter-spacing: 0.06em; } .v06-ds-title-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 4px; gap: 12px; } .v06-ds-title-col { min-width: 0; flex: 1; } .v06-ds-title { font-size: 22px; font-weight: 500; letter-spacing: 0.01em; color: var(--vios-white-92); line-height: 1.15; } .v06-ds-location { font-size: 12px; color: var(--vios-white-74); margin-top: 3px; } .v06-ds-price { font-size: 18px; font-weight: 500; color: var(--vios-gold-deep); flex-shrink: 0; } .v06-ds-attrs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .v06-ds-attr-chip { padding: 5px 10px; border-radius: 999px; background: var(--vios-gold-faint); border: 1px solid var(--glass-border); font-size: 11px; color: var(--vios-white-74); letter-spacing: 0.03em; } .v06-ds-attr-chip strong { color: var(--vios-white-92); font-weight: 500; margin-right: 4px; } .v06-ds-tabbar { padding: 0 14px; flex-shrink: 0; } .v06-ds-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--vios-gold-faint); border: 1px solid var(--glass-border); } .v06-ds-tab { flex: 1; text-align: center; padding: 8px 0; border-radius: 8px; border: none; background: transparent; cursor: pointer; font-size: 12px; color: var(--vios-white-74); letter-spacing: 0.02em; font-weight: 400; transition: all 0.15s; font-family: inherit; } .v06-ds-tab.is-active { background: var(--vios-panel-strong); color: var(--vios-gold-deep); font-weight: 500; } .v06-ds-body { flex: 1; overflow-y: auto; padding: 16px 20px 4px; } .v06-ds-section-label { font-size: 9px; color: var(--vios-white-56); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; } .v06-ds-description { font-size: 13px; line-height: 1.65; color: var(--vios-white-74); } .v06-ds-divider { height: 1px; background: var(--glass-border); margin: 16px 0 14px; } .v06-ds-about-grid { display: grid; grid-template-columns: 1fr 1fr; row-gap: 12px; column-gap: 16px; } .v06-ds-about-cell-label { font-size: 9px; color: var(--vios-white-56); letter-spacing: 0.14em; text-transform: uppercase; } .v06-ds-about-cell-value { font-size: 14px; color: var(--vios-white-92); margin-top: 3px; font-weight: 500; } .v06-ds-agent-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .v06-ds-agent-photo { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; background: var(--vios-agent-photo-bg); display: flex; align-items: center; justify-content: center; font-size: 24px; overflow: hidden; } .v06-ds-agent-photo-img { width: 100%; height: 100%; object-fit: cover; } .v06-ds-agent-name { font-size: 16px; font-weight: 500; color: var(--vios-white-92); line-height: 1.2; } .v06-ds-agent-agency { font-size: 12px; color: var(--vios-agency-color); margin-top: 2px; } .v06-ds-agent-rating { font-size: 12px; color: var(--vios-gold-deep); margin-top: 2px; } .v06-ds-agent-stats { display: flex; border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); padding: 10px 0; margin-bottom: 14px; } .v06-ds-agent-stat { flex: 1; text-align: center; } .v06-ds-agent-stat-value { font-size: 18px; font-weight: 600; color: var(--vios-white-92); } .v06-ds-agent-stat-label { font-size: 9px; color: var(--vios-white-56); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; } .v06-ds-agent-stat-div { width: 1px; background: var(--glass-border); margin: 4px 0; } .v06-ds-agent-actions { display: flex; gap: 8px; } .v06-ds-enquire-btn { flex: 1; height: 40px; border-radius: 999px; background: var(--vios-gold); color: rgba(255,248,240,0.97); border: none; font-size: 13px; cursor: pointer; letter-spacing: 0.04em; font-weight: 500; font-family: inherit; } .v06-ds-call-btn { flex: 1; height: 40px; border-radius: 999px; background: transparent; color: var(--vios-white-92); border: 1px solid var(--glass-border); font-size: 13px; cursor: pointer; letter-spacing: 0.04em; font-family: inherit; transition: all 0.15s; } .v06-ds-call-btn.is-revealed { font-size: 11px; font-family: ui-monospace, Menlo, monospace; } .v06-ds-inspect-slots { margin-top: 4px; } .v06-ds-inspect-slot { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 0; cursor: pointer; background: none; border: none; border-top: 1px solid var(--glass-border); color: inherit; font-family: inherit; text-align: left; } .v06-ds-inspect-slot:first-child { border-top: none; } .v06-ds-inspect-slot-day { font-size: 14px; font-weight: 500; color: var(--vios-white-92); letter-spacing: 0.01em; } .v06-ds-inspect-slot-duration { font-size: 11px; color: var(--vios-white-56); margin-top: 2px; letter-spacing: 0.02em; } .v06-ds-inspect-slot-right { display: flex; align-items: center; gap: 10px; } .v06-ds-inspect-slot-time { font-size: 14px; color: var(--vios-gold-deep); font-weight: 500; letter-spacing: 0.02em; } .v06-ds-inspect-slot-chevron { font-size: 12px; color: var(--vios-white-56); transition: transform 0.15s; } .v06-ds-inspect-slot-chevron.is-open { transform: rotate(90deg); } .v06-ds-cal-picker { margin-bottom: 10px; padding: 8px; border-radius: 12px; background: var(--vios-gold-faint); border: 1px solid var(--glass-border); display: flex; gap: 6px; } .v06-ds-cal-btn { flex: 1; text-align: center; padding: 9px 0; border-radius: 8px; font-size: 11px; color: var(--vios-white-92); cursor: pointer; background: var(--glass-bg); border: 1px solid var(--glass-border); font-family: inherit; } .v06-ds-area-map { height: 200px; background: var(--vios-map-bg); border-radius: 14px; border: 1px solid var(--glass-border); position: relative; overflow: hidden; margin-bottom: 14px; } .v06-ds-area-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .v06-ds-area-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--vios-gold); border: 2px solid rgba(248,240,232,0.95); box-shadow: 0 0 0 8px rgba(var(--vios-gold-deep-rgb), 0.2), 0 2px 6px rgba(0,0,0,0.5); z-index: 4; } .v06-ds-area-poi { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 1.2px solid var(--vios-map-poi-border); background: var(--vios-map-poi-bg); color: var(--vios-white-92); font-size: 10px; font-weight: 500; display: flex; align-items: center; justify-content: center; transform: translate(-50%,-50%); z-index: 3; } .v06-ds-poi-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 13px; border-top: 1px solid var(--glass-border); } .v06-ds-poi-row:first-child { border-top: none; } .v06-ds-poi-n { display: inline-block; width: 18px; font-size: 10px; color: var(--vios-white-56); font-family: ui-monospace, Menlo, monospace; } .v06-ds-poi-name { color: var(--vios-white-92); } .v06-ds-poi-dist { color: var(--vios-gold-deep); font-weight: 500; } /* === V0.6 Editor: form primitives (Task 4.1) === */ /* EditorInput — mock lines 202–216 */ body.ui-v06 .v06-editor-input { margin-bottom: 7px; } /* mock 204 */ body.ui-v06 .v06-editor-input-label { font-size: 10px; color: var(--vios-white-56); /* mock 205 */ letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 3px; /* mock 205–206 */ } body.ui-v06 .v06-editor-input-field { width: 100%; padding: 6px 9px; box-sizing: border-box; /* mock 207–209 */ background: var(--vios-input-bg); /* mock 209 */ border: 1px solid var(--vios-input-border); border-radius: 7px; /* mock 210 */ color: var(--vios-white-92); font-size: 12px; font-family: inherit; /* mock 211 */ outline: none; transition: border-color 0.12s, box-shadow 0.12s; /* mock 212 */ } body.ui-v06 .v06-editor-input-field:focus { box-shadow: 0 0 0 2px rgba(var(--vios-gold-deep-rgb), 0.12); /* derived: goldDeep focus ring */ } /* Agent photo upload button (renderV06AgentSection photoUrl row) */ body.ui-v06 .v06-editor-upload-btn { margin-top: 6px; padding: 6px 12px; cursor: pointer; background: var(--vios-input-bg); color: var(--vios-white-92); border: 1px solid var(--vios-input-border); border-radius: 7px; font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; transition: background 0.12s, border-color 0.12s; } body.ui-v06 .v06-editor-upload-btn:hover:not(:disabled) { background: var(--vios-list-active-bg); border-color: rgba(var(--vios-gold-deep-rgb), 0.45); } body.ui-v06 .v06-editor-upload-btn:disabled { opacity: 0.55; cursor: progress; } body.ui-v06 .v06-editor-upload-status { margin-left: 10px; font-size: 11px; color: var(--vios-white-74); } /* EditorSlider — mock lines 218–229 */ body.ui-v06 .v06-editor-slider { margin-bottom: 7px; } /* mock 220 */ body.ui-v06 .v06-editor-slider-row { display: flex; justify-content: space-between; /* mock 221 */ align-items: center; margin-bottom: 4px; /* mock 221 */ } body.ui-v06 .v06-editor-slider-label { font-size: 10px; color: var(--vios-white-56); /* mock 222 */ letter-spacing: 0.10em; text-transform: uppercase; /* mock 222 */ } body.ui-v06 .v06-editor-slider-display { font-size: 11px; color: var(--vios-white-74); /* mock 223 */ font-feature-settings: "tnum"; /* mock 223 */ } body.ui-v06 .v06-editor-slider-input { width: 100%; accent-color: var(--vios-gold); cursor: pointer; /* mock 225 */ } /* EditorSelect — mock lines 231–245 */ body.ui-v06 .v06-editor-select { margin-bottom: 7px; } /* mock 233 */ body.ui-v06 .v06-editor-select-label { font-size: 10px; color: var(--vios-white-56); /* mock 234–235 */ letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 3px; /* mock 234–235 */ } body.ui-v06 .v06-editor-select-field { width: 100%; padding: 6px 9px; box-sizing: border-box; /* mock 237 */ background: var(--vios-input-bg); border: 1px solid var(--vios-input-border); /* mock 237–238 */ border-radius: 7px; color: var(--vios-white-92); /* mock 238–239 */ font-size: 12px; font-family: inherit; outline: none; /* mock 239 */ } /* ToggleSwitch — mock lines 247–262 */ body.ui-v06 .v06-editor-toggle { display: flex; align-items: center; /* mock 249 */ justify-content: space-between; margin-bottom: 8px; /* mock 249 */ } body.ui-v06 .v06-editor-toggle-label { font-size: 11px; color: var(--vios-white-74); } /* mock 250 */ body.ui-v06 .v06-editor-toggle-track { width: 34px; height: 18px; border-radius: 9px; /* mock 252 */ position: relative; cursor: pointer; flex-shrink: 0; /* mock 251 */ background: var(--vios-gold-faint); border: 1px solid var(--glass-border); /* mock 253–254: unchecked */ transition: background 0.15s, border-color 0.15s; /* mock 255 */ } body.ui-v06 .v06-editor-toggle.is-on .v06-editor-toggle-track { background: var(--vios-gold); border-color: var(--vios-gold); /* mock 253–254: checked */ } body.ui-v06 .v06-editor-toggle-ball { width: 12px; height: 12px; border-radius: 6px; /* mock 257 */ background: #fff; position: absolute; top: 2px; left: 2px; /* mock 257–258 */ transition: transform 0.15s; /* mock 258: animate with transform */ } body.ui-v06 .v06-editor-toggle.is-on .v06-editor-toggle-ball { transform: translateX(16px); /* mock 258: left 18–2=16px shift */ } /* TypeTag — mock lines 264–274 */ body.ui-v06 .v06-editor-type-tag { font-size: 9px; font-weight: 600; letter-spacing: 0.12em; /* mock 265 */ text-transform: uppercase; padding: 2px 6px; border-radius: 4px; /* mock 265–269 */ } body.ui-v06 .v06-editor-type-tag-wall { color: var(--vios-zone-wall); background: var(--vios-zone-wall-bg); /* mock 270–271 */ border: 1px solid var(--vios-zone-wall-border); /* mock 272 */ } body.ui-v06 .v06-editor-type-tag-trigger { color: var(--vios-zone-trigger); background: var(--vios-zone-trigger-bg); /* mock 270–271 */ border: 1px solid var(--vios-zone-trigger-border); /* mock 272 */ } body.ui-v06 .v06-editor-type-tag-neutral { color: var(--vios-white-74); background: var(--vios-input-bg); /* derived: neutral fallback */ border: 1px solid var(--vios-input-border); } /* SmallBtn — mock lines 125–135 */ body.ui-v06 .v06-editor-small-btn { height: 24px; padding: 0 8px; border-radius: 6px; cursor: pointer; /* mock 127 */ font-size: 10px; font-family: inherit; letter-spacing: 0.04em; /* mock 128 */ background: var(--vios-gold-faint); border: 1px solid var(--glass-border); /* mock 131–132 */ color: var(--vios-white-74); transition: opacity 0.12s; /* mock 133 */ } body.ui-v06 .v06-editor-small-btn-danger { background: var(--vios-danger-bg); border-color: var(--vios-danger-border); /* mock 131–132 */ color: var(--vios-danger); /* mock 133 */ } body.ui-v06 .v06-editor-small-btn:disabled { cursor: default; opacity: 0.4; } /* mock 130 */ /* HintText — mock line 277–279 */ body.ui-v06 .v06-editor-hint-text { font-size: 11px; color: var(--vios-white-56); margin-bottom: 8px; line-height: 1.5; /* mock 278 */ } /* === V0.6 Editor mode: hide viewer chrome that conflicts with ribbon/panel === Per design (design-tool/Tools/Viewer/Editor.html) editor mode renders only scene + ribbon + panel + RoomNavbar. PropertyCard / AgentCard / Inspection / TopRight / HelpButton / Tutorial / MobileTopBar / MobileHelp / ForwardButton / DetailSheet are all hidden so they don't overlap the editor surfaces. */ /* InspectionCard is intentionally NOT in this list — it stays visible in edit mode so the operator gets a live preview of the variant they're authoring (variant selector, body copy, day pills, etc.). It IS made non-interactive though, so a stray click doesn't fire the mailto / cal picker / notify toggle while authoring. */ body.ui-v06.edit-mode-active #v06InspectionCard { pointer-events: none; } /* During Preview (body.editor-preview-active also present), these chrome surfaces should reappear so the operator sees the full viewer experience. Excluding the preview class lets each element's own display rule take over. */ body.ui-v06.edit-mode-active:not(.editor-preview-active) #v06PropertyCard, body.ui-v06.edit-mode-active:not(.editor-preview-active) #v06AgentCard, body.ui-v06.edit-mode-active:not(.editor-preview-active) #v06TopRight, body.ui-v06.edit-mode-active:not(.editor-preview-active) #v06HelpButton, body.ui-v06.edit-mode-active:not(.editor-preview-active) #v06Tutorial, body.ui-v06.edit-mode-active:not(.editor-preview-active) #v06MobileTopBar, body.ui-v06.edit-mode-active:not(.editor-preview-active) #v06MobileHelp, body.ui-v06.edit-mode-active:not(.editor-preview-active) .v06-stick, body.ui-v06.edit-mode-active:not(.editor-preview-active) #v06DetailSheet, body.ui-v06.edit-mode-active:not(.editor-preview-active) #v06DetailSheetBackdrop, body.ui-v06.edit-mode-active:not(.editor-preview-active) #v06DPad { display: none !important; } /* === V0.6 Editor: Ribbon (Task 4.2) — mock lines 806–874 === */ body:not(.ui-v06) #v06EditorRibbon { display: none; } body.ui-v06 #v06EditorRibbon[hidden] { display: none; } body.ui-v06.edit-mode-active #v06EditorRibbon { position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 100; /* mock 822 */ background: var(--vios-panel-strong); /* mock 823 */ border-bottom: 1px solid var(--glass-border); /* mock 823 */ backdrop-filter: blur(20px) saturate(1.05); /* mock 824 */ -webkit-backdrop-filter: blur(20px) saturate(1.05); /* mock 824 */ display: flex; align-items: center; padding: 0 16px; gap: 10px; /* mock 825 */ pointer-events: auto; /* parent #topBar has pointer-events:none; without this override, canvas behind eats ribbon clicks */ } body.ui-v06.edit-mode-active #v06EditorRibbon[hidden] { display: flex; } .v06-editor-ribbon-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; /* mock 828 */ } .v06-editor-ribbon-badge { font-size: 9px; font-weight: 600; letter-spacing: 0.18em; /* mock 829–830 */ text-transform: uppercase; color: var(--vios-gold-deep); /* mock 829–830 */ background: rgba(var(--vios-gold-deep-rgb), 0.094); /* mock 830: goldDeep + "18" alpha ≈ 0.094 */ border: 1px solid rgba(var(--vios-gold-deep-rgb), 0.25); /* mock 831: goldDeep + "40" alpha ≈ 0.25 */ border-radius: 6px; padding: 3px 9px; flex-shrink: 0; /* mock 831 */ } .v06-editor-ribbon-status { font-size: 11px; font-weight: 500; border-radius: 5px; /* mock 832–836 */ padding: 2px 7px; flex-shrink: 0; /* mock 836 */ } .v06-editor-ribbon-status[data-v06-editor-status="dirty"] { color: #d4a843; /* mock 833: literal hex */ background: rgba(212, 168, 67, 0.10); /* mock 834: literal */ border: 1px solid rgba(212, 168, 67, 0.30); /* mock 835: literal */ } .v06-editor-ribbon-status[data-v06-editor-status="saved"] { color: #4da866; /* mock 833: literal hex */ background: rgba(125, 196, 160, 0.10); /* mock 834: literal */ border: 1px solid rgba(125, 196, 160, 0.30); /* mock 835: literal */ } .v06-editor-ribbon-slug { font-size: 10px; color: var(--vios-white-56); /* mock 838–839 */ background: var(--vios-input-bg); border: 1px solid var(--vios-input-border); /* mock 838–839 */ border-radius: 5px; padding: 2px 7px; letter-spacing: 0.04em; /* mock 839–840 */ flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* mock 840 */ } .v06-editor-ribbon-title { font-size: 10px; color: var(--vios-white-56); /* mock 842 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; /* mock 842–843 */ } .v06-editor-ribbon-center { display: flex; align-items: center; gap: 6px; flex-shrink: 0; /* mock 847 */ } .v06-editor-ribbon-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; /* mock 861 */ } .v06-editor-ribbon-vdivider { width: 1px; height: 22px; background: var(--vios-divider); flex-shrink: 0; /* mock 107–109 VDivider */ } .v06-editor-ribbon-btn { height: 30px; padding: 0 11px; border-radius: 8px; flex-shrink: 0; /* mock 811 */ background: var(--vios-gold-faint); border: 1px solid var(--glass-border); /* mock 812 */ color: var(--vios-white-74); font-size: 11px; cursor: pointer; /* mock 814–815 */ font-family: inherit; letter-spacing: 0.04em; transition: all 0.12s; /* mock 816–817 */ } .v06-editor-ribbon-btn.is-active { background: rgba(var(--vios-gold-deep-rgb), 0.10); /* mock 812: goldDeep 1a */ border-color: rgba(var(--vios-gold-deep-rgb), 0.34); /* mock 813: goldDeep 55 */ color: var(--vios-gold-deep); /* mock 814 */ } .v06-editor-ribbon-btn[disabled], .v06-editor-ribbon-btn:disabled { background: transparent; border-color: transparent; /* mock 812, 813 */ color: var(--vios-white-56); cursor: default; opacity: 0.4; /* mock 815, 817 */ } /* === V0.6 Editor: Mode toggle (editor-only) === */ .v06-editor-ribbon-mode { display: inline-flex; align-items: center; gap: 0; height: 30px; border: 1px solid var(--glass-border); border-radius: 8px; overflow: hidden; background: var(--vios-gold-faint); } .v06-editor-ribbon-mode-btn { height: 28px; padding: 0 10px; border: 0; background: transparent; color: var(--vios-white-74); font-size: 11px; cursor: pointer; font-family: inherit; letter-spacing: 0.04em; transition: all 0.12s; } .v06-editor-ribbon-mode-btn + .v06-editor-ribbon-mode-btn { border-left: 1px solid var(--glass-border); } .v06-editor-ribbon-mode-btn.is-active { background: rgba(var(--vios-gold-deep-rgb), 0.16); color: var(--vios-gold-deep); } /* === V0.6 Editor: Hint Banner Finish button === */ .v06-editor-hint-banner-finish { height: 24px; padding: 0 14px; margin: 0 6px; border-radius: 8px; background: var(--vios-gold); border: 1px solid var(--vios-gold); color: #1a1714; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; letter-spacing: 0.04em; transition: all 0.12s; pointer-events: auto; } .v06-editor-hint-banner-finish:hover { filter: brightness(1.1); } .v06-editor-hint-banner-finish[hidden] { display: none; } /* === V0.6 Editor: Panel collapse toggle === */ .v06-editor-panel-collapse { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--glass-border); background: transparent; color: var(--vios-white-74); font-size: 14px; cursor: pointer; line-height: 1; padding: 0; } .v06-editor-panel-collapse:hover { background: var(--vios-gold-faint); } .v06-editor-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } body.ui-v06.edit-mode-active #v06EditorPanel.is-collapsed { width: auto; } body.ui-v06.edit-mode-active #v06EditorPanel.is-collapsed .v06-editor-panel-body { display: none; } body.ui-v06.edit-mode-active #v06EditorPanel.is-collapsed .v06-editor-panel-eyebrow { display: none; } /* === V0.6 Editor: Panel + AccordionSection (Task 4.3) === */ /* EditorPanel — mock lines 633–701 */ body:not(.ui-v06) #v06EditorPanel { display: none; } body.ui-v06 #v06EditorPanel[hidden] { display: none; } body.ui-v06.edit-mode-active #v06EditorPanel { position: fixed; left: 14px; top: 62px; bottom: 76px; width: 312px; /* mock 644–646 */ display: flex; flex-direction: column; overflow-y: hidden; /* mock 646 */ z-index: 99; border-radius: 14px; pointer-events: auto; /* mock 647–648 */ background: var(--vios-panel-strong); border: 1px solid var(--glass-border); /* from Panel */ backdrop-filter: blur(18px) saturate(1.05); -webkit-backdrop-filter: blur(18px) saturate(1.05); box-shadow: var(--glass-shadow); color: var(--vios-white-92); } body.ui-v06.edit-mode-active #v06EditorPanel[hidden] { display: none; } .v06-editor-panel-header { padding: 10px 14px 8px; border-bottom: 1px solid var(--vios-divider); flex-shrink: 0; /* mock 650 */ } .v06-editor-panel-eyebrow { font-size: 10px; letter-spacing: 0.16em; /* mock 651–653 */ text-transform: uppercase; color: var(--vios-white-56); /* mock 651–653 */ } .v06-editor-panel-body { flex: 1; overflow-y: auto; overflow-x: hidden; } /* mock 657 */ /* AccordionSection — mock lines 282–307 */ .v06-editor-section { border-bottom: 1px solid var(--vios-divider); } /* mock 285 */ .v06-editor-section-header { display: flex; align-items: center; justify-content: space-between; /* mock 287 */ width: 100%; padding: 10px 14px; cursor: pointer; box-sizing: border-box; /* mock 287 */ background: transparent; border: none; outline: none; /* mock 288 */ transition: background 0.12s; list-style: none; /* mock 289, 292 — list-style:none removes triangle */ color: var(--vios-white-74); font-size: 11px; font-weight: 400; /* mock 289–290 */ letter-spacing: 0.08em; text-transform: uppercase; font-family: inherit; /* mock 290–291 */ } .v06-editor-section-header::-webkit-details-marker { display: none; } /* Safari disclosure arrow */ .v06-editor-section[open] > .v06-editor-section-header { background: var(--vios-list-active-bg); /* mock 289: open = listActiveBg */ } .v06-editor-section-header-left { display: flex; align-items: center; gap: 7px; /* mock 294 */ } .v06-editor-section-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; /* mock 290–291 */ font-weight: 400; color: var(--vios-white-74); /* mock 289–290 */ } .v06-editor-section-primary > .v06-editor-section-header .v06-editor-section-label { font-weight: 600; color: var(--vios-white-92); /* mock 290: primary+closed */ } .v06-editor-section[open] > .v06-editor-section-header .v06-editor-section-label { color: var(--vios-gold-deep); font-weight: 600; /* mock 289–290: open */ } .v06-editor-section-badge { font-size: 9px; background: var(--vios-gold-faint); /* mock 297 */ border: 1px solid var(--glass-border); border-radius: 9px; /* mock 298 */ padding: 1px 6px; color: var(--vios-white-56); /* mock 298–299 */ } .v06-editor-section-chevron { font-size: 9px; opacity: 0.5; color: var(--vios-white-56); /* mock 302–303 */ transition: transform 0.15s; /* mock 303 */ } .v06-editor-section[open] > .v06-editor-section-header .v06-editor-section-chevron { transform: rotate(180deg); opacity: 1; color: var(--vios-gold); /* mock 302: open=rotate+gold */ } .v06-editor-section-body { padding: 4px 14px 14px; } /* mock 305 */ .v06-editor-section-placeholder { padding: 16px 4px; font-size: 10px; color: var(--vios-white-56); /* Phase 4a interim placeholder */ text-align: center; } /* === V0.6 embed mode === */ /* Wordmark — shown only in V0.6 embed mode (Desktop_Embed.html 1117–1132, Mobile_Embed.html 909–931) */ body:not(.ui-v06) #v06EmbedWordmark { display: none; } body.ui-v06:not(.embed-mode) #v06EmbedWordmark { display: none; } body.ui-v06.embed-mode #v06EmbedWordmark { position: fixed; top: 14px; left: 18px; /* desktop offset — mock 1124 */ z-index: 5; font-size: 9px; /* mock 1125 */ font-weight: 500; /* mock 1125 */ letter-spacing: 0.14em; /* mock 1126 */ text-transform: uppercase; /* mock 1126 */ color: var(--vios-white-38); font-family: var(--ui-sans); pointer-events: none; user-select: none; } @media (pointer: coarse) { body.ui-v06.embed-mode #v06EmbedWordmark { left: 14px; /* mobile offset — mock 919 */ } } /* Hide V0.6 cluster + actions chrome in embed mode. Per design (Desktop_Embed.html lines 1117–1133): scene + wordmark + HelpButton + DPad + RoomNavbar. PropertyCard / AgentCard / InspectionCard / TopRight share+fullscreen / mobile-specific surfaces all hidden; the wordmark replaces the property identity. */ body.ui-v06.embed-mode #v06TopLeft, body.ui-v06.embed-mode #v06PropertyCard, body.ui-v06.embed-mode #v06AgentCard, body.ui-v06.embed-mode #v06InspectionCard, body.ui-v06.embed-mode #v06TopRight, body.ui-v06.embed-mode #v06MobileTopBar, body.ui-v06.embed-mode #v06DetailSheet, body.ui-v06.embed-mode #v06DetailSheetBackdrop { display: none !important; } /* === V0.6 Embed: adaptive chrome scale === The desktop bottom band — HelpButton (left) · RoomNavbar (centre) · DPad (right) — needs ~950px to sit without overlapping, which an embed iframe often doesn't have. Rather than drop the exploration chip or stack the bar, updateEmbedChromeScale() in main.js measures the frame and sets --embed-chrome-scale so the whole band shrinks just enough to fit (full-size when there's room). We scale the INNER .v06-room-navbar-bar — not the centred #v06RoomNavbar — so its translateX(-50%) centring is untouched; Help and DPad scale from their anchored corners so they stay pinned. max-width:none lets the bar report its true natural width to the measurer. Embed-only: standalone and mobile layouts are unaffected. */ body.ui-v06.embed-mode .v06-room-navbar-bar { max-width: none; transform: scale(var(--embed-chrome-scale, 1)); transform-origin: center bottom; } body.ui-v06.embed-mode #v06HelpButton { transform: scale(var(--embed-chrome-scale, 1)); transform-origin: left bottom; } body.ui-v06.embed-mode #v06DPad { transform: scale(var(--embed-chrome-scale, 1)); transform-origin: right bottom; } /* The "?" help toggle (#v06MobileHelpBtn) now lives inside #v06MobileTopBar, which IS hidden in embed mode — so mobile embeds no longer surface the help toggle (consistent: the mobile Share button shares that TopBar and is also hidden in embed). #v06MobileHelp (the overlay itself) stays available. */ /* === V0.6 Mobile: hide DESKTOP chrome on touch surfaces === Per design (Mobile_Standalone.html lines 911–924): scene + mobile TopBar + mobile HelpButton + ForwardButton + mobile RoomNavbar + DetailSheet. Desktop PropertyCard / AgentCard / InspectionCard / TopRight / HelpButton / DPad / RoomNavbar are all hidden in favour of their mobile-specific counterparts. */ body.ui-v06.is-touch #v06PropertyCard, body.ui-v06.is-touch #v06AgentCard, body.ui-v06.is-touch #v06InspectionCard, body.ui-v06.is-touch #v06TopRight, body.ui-v06.is-touch #v06HelpButton, body.ui-v06.is-touch #v06DPad { display: none !important; } /* === V0.6 HotspotsSection === */ .v06-hotspots-section { display: flex; flex-direction: column; gap: 8px; } /* mock 313 */ .v06-hotspot-card { padding: 9px 10px; border-radius: 10px; /* mock 327 */ background: var(--vios-input-bg); border: 1px solid var(--vios-input-border); /* mock 325–326 */ cursor: pointer; } .v06-hotspot-card.is-selected { border-color: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.27); /* mock 325: goldDeep44 */ background: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.07); /* mock 325: goldDeep12 */ } .v06-hotspot-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; /* mock 328 */ } .v06-hotspot-card-label { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; } .v06-hotspot-card-name { font-size: 12px; color: var(--vios-white-74); font-weight: 400; /* mock 333 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v06-hotspot-card.is-selected .v06-hotspot-card-name { color: var(--vios-gold-deep); font-weight: 600; /* mock 333 selected */ } .v06-hotspot-card-type-tag { font-size: 9px; color: var(--vios-white-56); } /* mock 334 */ .v06-hotspot-card-actions { display: flex; gap: 4px; flex-shrink: 0; } .v06-hotspot-card-expanded { padding-top: 10px; display: flex; flex-direction: column; gap: 8px; /* mock 342 */ } .v06-hotspot-card-section-divider { font-size: 10px; color: var(--vios-white-56); letter-spacing: 0.08em; text-transform: uppercase; margin: 4px 0 2px; padding-bottom: 5px; border-bottom: 1px solid var(--vios-divider); /* mock 350 */ } .v06-hotspot-card-xyz { font-family: ui-monospace, Menlo, monospace; font-size: 9px; /* mock 356 */ color: var(--vios-white-56); letter-spacing: 0.04em; } .v06-hotspots-empty { font-size: 11px; color: var(--vios-white-56); text-align: center; padding: 14px 0; /* mock 365 */ } /* === V0.6 PresetsSection === */ .v06-presets-section { display: flex; flex-direction: column; gap: 8px; } .v06-preset-card { padding: 9px 10px; border-radius: 10px; /* mock 385 */ background: var(--vios-input-bg); border: 1px solid var(--vios-input-border); cursor: pointer; } .v06-preset-card.is-selected { border-color: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.25); /* mock 384: goldDeep40 */ background: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.06); /* mock 384: goldDeep10 */ } .v06-preset-card-row { display: flex; align-items: center; gap: 7px; /* mock 387 */ } .v06-preset-drag-handle { font-size: 13px; color: var(--vios-white-56); cursor: grab; user-select: none; /* mock 388 */ } .v06-preset-card-name { font-size: 12px; color: var(--vios-white-74); font-weight: 400; flex: 1; /* mock 390 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v06-preset-card.is-selected .v06-preset-card-name { color: var(--vios-gold-deep); font-weight: 600; /* mock 390 selected */ } .v06-preset-default-badge { font-size: 9px; color: var(--vios-gold-deep); /* mock 392 */ background: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.09); border: 1px solid rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.27); border-radius: 4px; padding: 1px 5px; white-space: nowrap; flex-shrink: 0; } .v06-preset-card-actions { display: flex; gap: 4px; flex-shrink: 0; } .v06-preset-card-expanded { padding-top: 8px; display: flex; flex-direction: column; gap: 8px; } /* mock 402 */ .v06-presets-empty { font-size: 11px; color: var(--vios-white-56); text-align: center; padding: 14px 0; /* mock 412 */ } /* === V0.6 TourSequenceSection (Guided Tour) === */ .v06-sequence-section { display: flex; flex-direction: column; gap: 8px; } .v06-sequence-empty { font-size: 11px; color: var(--vios-white-56); text-align: center; padding: 14px 0; } .v06-sequence-card { padding: 9px 10px; border-radius: 10px; background: var(--vios-input-bg); border: 1px solid var(--vios-input-border); } .v06-sequence-card.is-missing { border-color: rgba(184, 76, 26, 0.55); background: rgba(184, 76, 26, 0.06); } .v06-sequence-card-row { display: flex; align-items: center; gap: 7px; } .v06-sequence-drag-handle { font-size: 13px; color: var(--vios-white-56); user-select: none; } .v06-sequence-index-badge { font-size: 10px; font-weight: 600; color: var(--vios-gold-deep); background: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.09); border: 1px solid rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.27); border-radius: 4px; padding: 1px 6px; flex-shrink: 0; min-width: 18px; text-align: center; } .v06-sequence-card-name { font-size: 12px; color: var(--vios-white-74); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; } .v06-sequence-missing-chip { font-size: 9px; color: #b84c1a; background: rgba(184, 76, 26, 0.10); border: 1px solid rgba(184, 76, 26, 0.40); border-radius: 4px; padding: 1px 5px; white-space: nowrap; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.04em; } .v06-sequence-missing-id { font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: var(--vios-white-56); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v06-sequence-card-actions { display: flex; gap: 4px; flex-shrink: 0; } .v06-sequence-card-expanded { padding-top: 8px; display: flex; flex-direction: column; gap: 8px; } .v06-editor-slider-readout { font-size: 10px; color: var(--vios-white-56); margin-left: 6px; font-family: ui-monospace, Menlo, monospace; } .v06-sequence-footer { display: flex; align-items: center; gap: 10px; padding-top: 6px; flex-wrap: wrap; } .v06-sequence-loop-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--vios-white-74); cursor: pointer; user-select: none; } /* === V0.6 Play tour button (PropertyCard + DetailSheet) === */ .v06-ds-tour-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--vios-gold); background: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.12); color: var(--vios-gold-deep); font-family: var(--ui-sans, inherit); font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; align-self: flex-start; } .v06-ds-tour-btn:active { transform: scale(0.98); } .v06-ds-tour-btn[hidden] { display: none; } .v06-ds-tour-btn-icon { display: inline-flex; align-items: center; color: var(--vios-gold-deep); } /* === V0.6 ZonesSection === */ .v06-zones-section { display: flex; flex-direction: column; gap: 8px; } .v06-zones-add-row { display: flex; gap: 6px; } /* mock 429 */ .v06-zones-add-btn { flex: 1; padding: 8px 0; border-radius: 8px; font-size: 11px; cursor: pointer; /* mock 430–433 */ font-family: var(--ui-sans); letter-spacing: 0.04em; border: none; outline: none; transition: opacity 0.12s; } .v06-zones-add-btn-wall { background: var(--vios-zone-wall-bg); border: 1px solid var(--vios-zone-wall-border) !important; /* mock 430 */ color: var(--vios-zone-wall); } .v06-zones-add-btn-trigger { background: var(--vios-zone-trigger-bg); border: 1px solid var(--vios-zone-trigger-border) !important; /* mock 435 */ color: var(--vios-zone-trigger); } .v06-zone-card { background: var(--vios-input-bg); border-radius: 10px; padding: 9px 10px; /* mock 445–448 */ border: 1px solid var(--vios-input-border); } .v06-zone-card-wall { border-left: 3px solid var(--vios-zone-wall); } /* mock 447 */ .v06-zone-card-trigger { border-left: 3px solid var(--vios-zone-trigger); } /* mock 447 */ .v06-zone-card.is-selected { box-shadow: 0 0 0 1px var(--vios-gold), 0 6px 18px rgba(0,0,0,0.35); } /* === V0.6 Wall zone collision toast === */ @keyframes v06WallToastSlideUp { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); } to { opacity: 1; transform: translate(-50%, -50%); } } @keyframes v06WallToastSlideDown { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } } @keyframes v06WallToastShake { 0%,100% { transform: translate(-50%, -50%); } 20% { transform: translate(calc(-50% - 4px), -50%); } 40% { transform: translate(calc(-50% + 4px), -50%); } 60% { transform: translate(calc(-50% - 3px), -50%); } 80% { transform: translate(calc(-50% + 2px), -50%); } } body.ui-v06 .v06-wall-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 16px; border-radius: 16px; max-width: min(420px, calc(100vw - 32px)); background: var(--vios-panel-strong); border: 1px solid rgba(184, 76, 26, 0.55); backdrop-filter: blur(20px) saturate(1.06); -webkit-backdrop-filter: blur(20px) saturate(1.06); box-shadow: var(--vios-panel-shadow-strong), 0 0 0 1px rgba(184, 76, 26, 0.18); pointer-events: none; animation: v06WallToastSlideUp 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, v06WallToastShake 0.40s ease 0.26s; } body.ui-v06 .v06-wall-toast-text { min-width: 0; } body.ui-v06 .v06-wall-toast-sub { white-space: normal; word-break: break-word; } body.ui-v06 .v06-wall-toast[hidden] { display: none; } body.ui-v06 .v06-wall-toast.is-exiting { animation: v06WallToastSlideDown 0.22s ease forwards; } body.ui-v06 .v06-wall-toast-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(180, 80, 30, 0.12); border: 1px solid rgba(180, 80, 30, 0.50); color: #b84c1a; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body.ui-v06 .v06-wall-toast-label { font-size: 13px; font-weight: 500; color: #b84c1a; letter-spacing: 0.02em; line-height: 1.2; } body.ui-v06 .v06-wall-toast-sub { font-size: 11px; color: var(--vios-white-92); letter-spacing: 0.03em; margin-top: 3px; line-height: 1.3; } /* Never shown in editor */ body.ui-v06.edit-mode-active:not(.editor-preview-active) .v06-wall-toast { display: none !important; } body.ui-v06 .v06-editor-small-btn.is-active { background: var(--vios-gold); color: #1a1a1a; border-color: var(--vios-gold); } .v06-zone-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; /* mock 450 */ } .v06-zone-points-hint { font-size: 10px; color: var(--vios-white-56); margin-top: 4px; } /* mock 462 */ .v06-zones-empty { font-size: 11px; color: var(--vios-white-56); text-align: center; padding: 14px 0; /* mock 477 */ } /* === V0.6 AgentSection + ExportSection === */ .v06-agent-section { display: flex; flex-direction: column; gap: 8px; } /* mock 488 */ .v06-export-section { display: flex; flex-direction: column; gap: 8px; } /* mock 548 */ .v06-export-btn-row { display: flex; flex-direction: column; gap: 6px; } /* mock 548 */ .v06-export-btn { width: 100%; padding: 8px 0; border-radius: 8px; font-size: 11px; cursor: pointer; /* mock 549–555 */ background: var(--vios-gold-faint); border: 1px solid var(--glass-border); color: var(--vios-white-74); font-family: var(--ui-sans); letter-spacing: 0.04em; transition: all 0.2s; outline: none; } .v06-export-btn.is-copied { background: var(--vios-success-bg); border-color: var(--vios-success-border); /* mock 551 */ color: var(--vios-success); } .v06-export-live-url { font-size: 10px; color: var(--vios-white-56); margin-top: 4px; line-height: 1.5; /* mock 566 */ word-break: break-all; } /* === V0.6 FloorsSection === */ .v06-floors-section { display: flex; flex-direction: column; gap: 8px; } .v06-floors-add-btn { width: 100%; padding: 8px 0; border-radius: 8px; font-size: 11px; cursor: pointer; /* mock 508–512 */ background: var(--vios-gold-faint); border: 1px solid var(--glass-border); color: var(--vios-white-74); font-family: var(--ui-sans); letter-spacing: 0.04em; outline: none; } .v06-floor-card { background: var(--vios-input-bg); border: 1px solid var(--vios-input-border); /* mock 515–516 */ border-radius: 10px; padding: 9px 10px; } .v06-floor-card-header { display: flex; justify-content: flex-end; margin-bottom: 6px; } /* mock 517 */ .v06-floors-empty { font-size: 11px; color: var(--vios-white-56); text-align: center; padding: 14px 0; /* mock 532 */ } /* === V0.6 MetadataSection === */ .v06-metadata-section { display: flex; flex-direction: column; gap: 8px; } .v06-metadata-section-divider { font-size: 10px; color: var(--vios-white-56); letter-spacing: 0.08em; /* mock 585 */ text-transform: uppercase; margin: 4px 0 2px; padding-bottom: 5px; border-bottom: 1px solid var(--vios-divider); } .v06-metadata-attr-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; /* mock 594 */ } .v06-metadata-attr-icon { font-size: 13px; width: 18px; text-align: center; } /* mock 595 */ .v06-metadata-attr-label { font-size: 11px; color: var(--vios-white-74); width: 52px; flex-shrink: 0; /* mock 596 */ } .v06-metadata-attr-show-label { display: flex; align-items: center; gap: 4px; font-size: 10px; /* mock 601–604 */ color: var(--vios-white-56); cursor: pointer; flex-shrink: 0; } .v06-metadata-rotation-row { display: flex; gap: 6px; } /* mock 610 */ .v06-metadata-rotation-col { flex: 1; } .v06-metadata-rotation-axis { font-size: 9px; color: var(--vios-white-56); letter-spacing: 0.08em; /* mock 613 */ margin-bottom: 3px; text-align: center; } /* === V0.6 Editor Placement Overlay === */ .v06-editor-hint-banner { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); /* mock 791 */ z-index: 99; display: flex; align-items: center; gap: 8px; background: var(--vios-panel-strong); border: 1px solid var(--glass-border); border-radius: 20px; padding: 7px 18px; font-size: 11px; color: var(--vios-white-92); /* mock 793–794 */ letter-spacing: 0.05em; backdrop-filter: blur(14px); white-space: nowrap; pointer-events: none; } .v06-editor-hint-banner[hidden] { display: none; } body.ui-v06.edit-mode-active .v06-editor-hint-banner[hidden] { display: none; } body.ui-v06.edit-mode-active:not([hidden]) .v06-editor-hint-banner { display: flex; } .v06-editor-hint-banner-icon { font-size: 7px; opacity: 0.7; } .v06-editor-hint-banner-text { flex: 1; } .v06-editor-hint-banner-dismiss { font-size: 9px; color: var(--vios-white-56); opacity: 0.8; } /* mock 797 */ body.ui-v06.edit-mode-active.is-placing canvas { cursor: crosshair; } /* mock 712 */ /* ================================================================ === Task 1 + Task 3b: Room navbar accents === - Thin gold progress fill at the bar's bottom edge (used by guided tour playback in Task 3b — fills as each leg progresses). - Inline "▷ Guided tour" CTA pill that opens the cinematic player. ================================================================ */ body.ui-v06 .v06-room-navbar-bar { position: relative; } body.ui-v06 .v06-room-navbar-progress { position: absolute; left: 8px; right: 8px; bottom: 3px; height: 2px; border-radius: 999px; background: rgba(217, 197, 178, 0.10); overflow: hidden; opacity: 0; transition: opacity 0.24s ease; pointer-events: none; } body.ui-v06.is-touring .v06-room-navbar-progress { opacity: 1; } body.ui-v06 .v06-room-navbar-progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--vios-gold), var(--vios-gold-deep)); transition: width 0.18s ease-out; } body.ui-v06 .v06-room-navbar-tour-btn { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--vios-gold); background: linear-gradient(180deg, rgba(219, 107, 51, 0.32), rgba(168, 66, 28, 0.32)); color: var(--vios-white-92); font-size: 12px; font-family: var(--ui-sans); letter-spacing: 0.02em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; transition: all 0.15s; } body.ui-v06 .v06-room-navbar-tour-btn[hidden] { display: none; } body.ui-v06 .v06-room-navbar-tour-btn:hover { background: linear-gradient(180deg, rgba(219, 107, 51, 0.5), rgba(168, 66, 28, 0.5)); color: var(--vios-gold-deep); } body.ui-v06 .v06-room-navbar-tour-icon { font-size: 10px; line-height: 1; } /* Mobile twins */ body.ui-v06.is-touch .v06-mrn-bar { position: relative; } body.ui-v06.is-touch .v06-mrn-progress { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 2px; border-radius: 999px; background: rgba(217, 197, 178, 0.10); overflow: hidden; opacity: 0; transition: opacity 0.24s ease; pointer-events: none; } body.ui-v06.is-touch.is-touring .v06-mrn-progress { opacity: 1; } body.ui-v06.is-touch .v06-mrn-progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--vios-gold), var(--vios-gold-deep)); transition: width 0.18s ease-out; } body.ui-v06.is-touch .v06-mrn-tour-btn { width: 36px; height: 44px; border-radius: 9px; background: linear-gradient(180deg, rgba(219, 107, 51, 0.32), rgba(168, 66, 28, 0.32)); border: 1px solid var(--vios-gold); color: var(--vios-white-92); cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; } body.ui-v06.is-touch .v06-mrn-tour-btn[hidden] { display: none; } /* Hide normal viewer chrome while a guided tour is playing (V13 owns the screen) */ body.ui-v06.is-touring #v06PropertyCard, body.ui-v06.is-touring #v06AgentCard, body.ui-v06.is-touring #v06InspectionCard, body.ui-v06.is-touring #v06TopRight, body.ui-v06.is-touring #v06HelpButton, body.ui-v06.is-touring #v06DPad, body.ui-v06.is-touring .v06-stick, body.ui-v06.is-touring #v06MobileTopBar, body.ui-v06.is-touring #v06RoomNavbar, body.ui-v06.is-touring #v06MobileRoomNavbar { opacity: 0; pointer-events: none; transition: opacity 0.32s ease; } /* ================================================================ === Task 3b: V13 · Cinematic Guided Story player === Spec source: design-tool/SS/wireframes/v13-story.html Letterbox top (60px) + bottom (120px), centre caption, bottom timeline. ================================================================ */ #v06CinematicStory { position: fixed; inset: 0; z-index: 30; pointer-events: none; color: var(--vios-white-92); font-family: var(--ui-sans); opacity: 0; transition: opacity 0.36s ease; } #v06CinematicStory[hidden] { display: none; } body.ui-v06.is-touring #v06CinematicStory { opacity: 1; } .v06-cs-letterbox-top, .v06-cs-letterbox-bottom { position: absolute; left: 0; right: 0; /* Cinematic letterboxes intentionally run a touch more transparent than other v06 panels so the scene reads through during playback. */ background: rgba(250, 244, 236, 0.62); backdrop-filter: blur(18px) saturate(1.05); -webkit-backdrop-filter: blur(18px) saturate(1.05); box-shadow: var(--glass-shadow); pointer-events: auto; box-sizing: border-box; } .v06-cs-letterbox-top { top: 0; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--glass-border); } .v06-cs-letterbox-bottom { bottom: 0; height: 74px; padding: 8px 24px 10px; display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--glass-border); } .v06-cs-brand { color: var(--vios-white-92); font-size: 11px; letter-spacing: 0.18em; } .v06-cs-controls { display: inline-flex; align-items: center; gap: 10px; color: var(--vios-white-74); font-size: 11px; } .v06-cs-control-sep { opacity: 0.55; } .v06-cs-pause, .v06-cs-exit { background: transparent; border: 0; color: var(--vios-white-74); cursor: pointer; font-family: var(--ui-sans); font-size: 11px; letter-spacing: 0.04em; padding: 4px 6px; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px; transition: color 0.15s, background 0.15s; } .v06-cs-pause:hover, .v06-cs-exit:hover { color: var(--vios-gold-deep); background: var(--vios-gold-faint); } .v06-cs-pause-icon, .v06-cs-exit-icon { font-size: 12px; line-height: 1; } .v06-cs-caption { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; /* Soft cream halo: caption now floats over the scene without an opaque black bar behind it, so it needs a light glow to stay legible on dark scenes. */ text-shadow: 0 1px 2px rgba(255, 248, 240, 0.65), 0 0 14px rgba(255, 248, 240, 0.45); max-width: min(420px, calc(100vw - 48px)); pointer-events: none; transition: opacity 0.36s ease, transform 0.36s ease; } .v06-cs-chapter { font-size: 11px; letter-spacing: 0.2em; color: var(--vios-gold-deep); text-transform: uppercase; } .v06-cs-title { font-size: 32px; font-weight: 300; margin-top: 8px; line-height: 1.1; letter-spacing: 0.01em; color: var(--vios-white-92); } .v06-cs-desc { font-size: 13px; line-height: 1.45; color: var(--vios-white-74); margin-top: 8px; letter-spacing: 0.01em; } .v06-cs-desc:empty { display: none; } .v06-cs-timeline { display: flex; align-items: center; gap: 12px; } .v06-cs-play { width: 28px; height: 28px; border-radius: 999px; background: var(--vios-gold); color: var(--vios-cta-fg); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; transition: background 0.15s, transform 0.15s; } .v06-cs-play:hover { background: var(--vios-gold); transform: scale(1.04); } body.ui-v06.is-paused .v06-cs-play .v06-cs-play-icon { content: '⏵'; } .v06-cs-time-current, .v06-cs-time-total { font-size: 11px; color: var(--vios-white-74); font-variant-numeric: tabular-nums; min-width: 28px; } .v06-cs-time-total { text-align: right; } .v06-cs-progress { flex: 1; height: 3px; background: var(--vios-divider); border-radius: 2px; position: relative; cursor: pointer; } .v06-cs-progress-fill { position: absolute; left: 0; top: 0; height: 3px; width: 0%; background: var(--vios-gold); border-radius: 2px; transition: width 0.18s linear; } .v06-cs-progress-dots { position: absolute; inset: -2px 0 -2px 0; pointer-events: none; } .v06-cs-progress-dot { position: absolute; top: -2px; width: 7px; height: 7px; border-radius: 999px; background: var(--vios-white-56); transform: translateX(-50%); transition: background 0.18s ease; pointer-events: auto; cursor: pointer; } .v06-cs-progress-dot.is-visited { background: var(--vios-gold); } .v06-cs-progress-dot.is-current { background: var(--vios-gold); box-shadow: 0 0 0 3px var(--vios-gold-soft); } .v06-cs-chapter-labels { display: flex; justify-content: space-between; margin-top: 0; color: var(--vios-white-56); font-size: 10px; } .v06-cs-chapter-labels > span { flex: 1; text-align: center; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; transition: color 0.18s ease; } .v06-cs-chapter-labels > span.is-current { color: var(--vios-gold-deep); } /* Mobile sizing: trim the letterboxes so the caption + timeline fit. */ @media (max-width: 600px) { .v06-cs-letterbox-top { height: 52px; padding: 0 16px; } .v06-cs-letterbox-bottom { height: 66px; padding: 6px 16px 8px; } .v06-cs-caption { top: 18%; } .v06-cs-title { font-size: 26px; } .v06-cs-desc { font-size: 12px; } .v06-cs-chapter-labels { font-size: 9px; } .v06-cs-play { width: 24px; height: 24px; font-size: 11px; } .v06-cs-pause-label, .v06-cs-exit-label { display: none; } } /* ============================================================ */ /* === Presentation experience (Reflct/StorySplat-style) === */ /* ============================================================ */ /* === Story editor section cards === */ .v06-story-section { display: flex; flex-direction: column; gap: 8px; } .v06-story-card { padding: 9px 10px; border-radius: 10px; background: var(--vios-input-bg); border: 1px solid var(--vios-input-border); cursor: pointer; } .v06-story-card.is-selected { border-color: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.25); background: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.06); } .v06-story-card-row { display: flex; align-items: center; gap: 7px; } .v06-story-card-num { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.12); color: var(--vios-gold-deep); font-size: 11px; font-weight: 600; } .v06-story-card-name { font-size: 12px; color: var(--vios-white-74); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v06-story-card.is-selected .v06-story-card-name { color: var(--vios-gold-deep); font-weight: 600; } .v06-story-card-actions { display: flex; gap: 4px; flex-shrink: 0; } .v06-story-card-expanded { padding-top: 8px; display: flex; flex-direction: column; gap: 8px; } /* === Experience editor section === */ .v06-experience-section { display: flex; flex-direction: column; gap: 8px; } /* === Viewer-side presentation chrome === */ /* All three surfaces sit inside #topBar which has pointer-events: none, so each fixed-position container needs explicit pointer-events: auto per the v06-phase-5 reflex (see CLAUDE.md). */ /* Nav bar — bottom-center prev/counter/title/next */ .v06-presentation-nav { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--vios-panel-strong, rgba(28, 22, 18, 0.78)); border: 1px solid var(--glass-border, rgba(217, 197, 178, 0.18)); border-radius: 24px; backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.05); pointer-events: auto; color: var(--vios-white-92, rgba(255, 255, 255, 0.92)); font-family: inherit; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); transition: opacity 0.25s ease; } .v06-presentation-nav[hidden] { display: none; } .v06-presentation-nav-btn { background: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.08); border: 1px solid rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.25); color: var(--vios-gold-deep); width: 32px; height: 32px; border-radius: 50%; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .v06-presentation-nav-btn:hover { background: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.18); border-color: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.5); } .v06-presentation-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; } .v06-presentation-nav-meta { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 120px; } .v06-presentation-nav-counter { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vios-gold-deep); opacity: 0.85; } .v06-presentation-nav-title { font-size: 13px; font-weight: 500; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Slide content card — left of nav bar on desktop, above nav on mobile */ .v06-presentation-card { position: fixed; left: 24px; bottom: 80px; max-width: 340px; z-index: 49; padding: 14px 16px; background: var(--vios-panel-strong, rgba(28, 22, 18, 0.78)); border: 1px solid var(--glass-border, rgba(217, 197, 178, 0.18)); border-radius: 16px; backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.05); pointer-events: auto; color: var(--vios-white-92, rgba(255, 255, 255, 0.92)); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); } .v06-presentation-card[hidden] { display: none; } .v06-presentation-card-img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; display: block; } .v06-presentation-card-img[hidden] { display: none; } .v06-presentation-card-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--vios-gold-deep); } .v06-presentation-card-desc { font-size: 12px; line-height: 1.45; color: var(--vios-white-74); white-space: pre-wrap; } .v06-presentation-card-cta { display: inline-block; margin-top: 10px; padding: 8px 16px; background: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.15); border: 1px solid rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.4); border-radius: 18px; color: var(--vios-gold-deep); font-size: 12px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background 0.15s ease; } .v06-presentation-card-cta:hover { background: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.25); } .v06-presentation-card-cta[hidden] { display: none; } /* Hybrid toggle button — top-right */ .v06-hybrid-toggle { position: fixed; right: 24px; top: 24px; z-index: 51; padding: 8px 16px; background: var(--vios-panel-strong, rgba(28, 22, 18, 0.78)); border: 1px solid rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.25); border-radius: 18px; backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.05); pointer-events: auto; color: var(--vios-gold-deep); font-size: 12px; font-weight: 500; cursor: pointer; transition: background 0.15s ease; } .v06-hybrid-toggle:hover { background: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.18); } .v06-hybrid-toggle[hidden] { display: none; } /* === Experience-mode body class gates === In pure presentation mode: hide all Explore-only chrome. In hybrid mode: hide Explore chrome ONLY while presentation is active. Walk safe-spawn is also gated in JS so the camera-Y pin doesn't fight the controller. */ body.ui-v06.experience-presentation #v06PropertyCard, body.ui-v06.experience-presentation #v06AgentCard, body.ui-v06.experience-presentation #v06InspectionCard, body.ui-v06.experience-presentation #v06DPad, body.ui-v06.experience-presentation #v06RoomNavbar, body.ui-v06.experience-presentation #v06MobileRoomNavbar, body.ui-v06.experience-presentation #v06MobileTopBar, body.ui-v06.experience-presentation .v06-detail-sheet, body.ui-v06.experience-presentation .v06-stick, body.ui-v06.experience-hybrid.presentation-active #v06PropertyCard, body.ui-v06.experience-hybrid.presentation-active #v06AgentCard, body.ui-v06.experience-hybrid.presentation-active #v06InspectionCard, body.ui-v06.experience-hybrid.presentation-active #v06DPad, body.ui-v06.experience-hybrid.presentation-active #v06RoomNavbar, body.ui-v06.experience-hybrid.presentation-active #v06MobileRoomNavbar, body.ui-v06.experience-hybrid.presentation-active #v06MobileTopBar, body.ui-v06.experience-hybrid.presentation-active .v06-detail-sheet, body.ui-v06.experience-hybrid.presentation-active .v06-stick { display: none !important; } /* === Mobile presentation chrome === */ body.ui-v06.is-touch .v06-presentation-card { left: 14px; right: 14px; max-width: calc(100% - 28px); bottom: 84px; } body.ui-v06.is-touch .v06-presentation-nav { bottom: 14px; gap: 8px; padding: 6px 8px; } body.ui-v06.is-touch .v06-presentation-nav-meta { min-width: 90px; } body.ui-v06.is-touch .v06-presentation-nav-title { max-width: 160px; } body.ui-v06.is-touch .v06-hybrid-toggle { right: 14px; top: 14px; font-size: 11px; padding: 6px 12px; } /* === Idle fade — presentation chrome dims with the rest of the chrome === */ body.ui-v06.viewer-idle .v06-presentation-nav, body.ui-v06.viewer-idle .v06-presentation-card, body.ui-v06.viewer-idle .v06-hybrid-toggle { opacity: 0.35; } /* ============================================================ */ /* === Iteration 1 — Editor UX polish === */ /* ============================================================ */ /* === Dual-thumb range slider (Story zoom + tilt) === Implementation: two overlapping thumbs sitting on top of a styled track. Track + fill take pointer-events: none; only the thumbs are clickable. Both thumbs occupy the same horizontal track via absolute positioning. JS clamps so the thumbs can't cross. */ .v06-editor-range-slider { position: relative; height: 28px; margin-top: 4px; user-select: none; } .v06-editor-range-track { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 4px; background: var(--vios-input-border, rgba(217, 197, 178, 0.15)); border-radius: 2px; pointer-events: none; } .v06-editor-range-track-fill { position: absolute; top: 0; bottom: 0; background: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.55); border-radius: 2px; pointer-events: none; } .v06-editor-range-thumb { /* Both thumbs occupy the same space. WebKit/Firefox differ on how to make the track transparent + the thumb clickable. */ position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 28px; background: transparent; -webkit-appearance: none; appearance: none; margin: 0; pointer-events: none; /* track is non-interactive; thumb gets pointer-events back below */ outline: none; } .v06-editor-range-thumb::-webkit-slider-runnable-track { background: transparent; height: 28px; border: none; } .v06-editor-range-thumb::-moz-range-track { background: transparent; height: 28px; border: none; } .v06-editor-range-thumb::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--vios-gold-deep, #C9A84C); border: 2px solid var(--vios-panel-strong, rgba(28, 22, 18, 0.78)); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); cursor: pointer; pointer-events: auto; margin-top: 0; } .v06-editor-range-thumb::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--vios-gold-deep, #C9A84C); border: 2px solid var(--vios-panel-strong, rgba(28, 22, 18, 0.78)); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); cursor: pointer; pointer-events: auto; } /* Hi thumb sits on top so its handle wins click priority near the upper edge */ .v06-editor-range-thumb-hi { z-index: 2; } .v06-editor-range-thumb-lo { z-index: 1; } /* === Editor preview mode — body.editor-preview-active === */ /* Active state for the Preview ribbon button — matches the existing is-active styling used by mode toggles + placement-hotspot. */ .v06-editor-ribbon-btn-preview.is-active { background: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.2); border-color: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.55); color: var(--vios-gold-deep); } /* While previewing: hide the editor panel (full-canvas WYSIWYG check). */ body.ui-v06.editor-preview-active #v06EditorPanel { display: none !important; } /* Keep only Preview + Exit in the ribbon — every other action is hidden so the operator's experience matches the visitor's. */ body.ui-v06.editor-preview-active #v06EditorRibbon .v06-editor-ribbon-btn:not([data-v06-editor-action="toggle-preview"]):not([data-v06-editor-action="exit"]) { display: none; } body.ui-v06.editor-preview-active #v06EditorRibbon .v06-editor-ribbon-vdivider { display: none; } /* Subtle visual cue that the ribbon is in preview mode */ body.ui-v06.editor-preview-active #v06EditorRibbon { background: rgba(var(--vios-gold-deep-rgb, 201,168,76), 0.08); } /* Hide the editor hint banner during preview (irrelevant + visually noisy) */ body.ui-v06.editor-preview-active .v06-editor-hint-banner { display: none; } /* === Editor save-conflict banner (refactor #66 — C8 / B3) === Shown when a PUT returns 409 version_mismatch: another session moved the row. */ body:not(.ui-v06) .v06-editor-conflict-banner { display: none; } body.ui-v06.edit-mode-active .v06-editor-conflict-banner { position: fixed; top: 62px; left: 50%; transform: translateX(-50%); z-index: 104; width: min(720px, calc(100vw - 28px)); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 10px; pointer-events: auto; background: rgba(41, 31, 24, 0.94); border: 1px solid rgba(212, 168, 67, 0.45); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35); color: var(--vios-white-92); backdrop-filter: blur(18px) saturate(1.05); -webkit-backdrop-filter: blur(18px) saturate(1.05); } body.ui-v06 .v06-editor-conflict-banner[hidden] { display: none; } .v06-editor-conflict-message { min-width: 0; font-size: 12px; line-height: 1.45; color: var(--vios-white-92); } .v06-editor-conflict-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .v06-editor-conflict-btn { height: 30px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--vios-gold-faint); color: var(--vios-white-74); font-size: 11px; cursor: pointer; font-family: inherit; letter-spacing: 0.04em; } .v06-editor-conflict-btn-primary { background: var(--vios-gold); border-color: var(--vios-gold); color: #1a1714; font-weight: 600; } @media (max-width: 700px) { body.ui-v06.edit-mode-active .v06-editor-conflict-banner { top: 58px; align-items: stretch; flex-direction: column; } .v06-editor-conflict-actions { justify-content: flex-end; } } /* === CSP prep (#150): rules moved out of inline style="" attributes (viewer.html) and out of JS innerHTML inline styles (main.js), so the viewer satisfies the enforced CSP (style-src has no 'unsafe-inline'). Each rule reproduces the exact inline declaration. === */ /* Mobile RoomNavbar dropdown anchor — was
(viewer.html). */ .v06-mrn-anchor { position: relative; } /* Analytics debug panel (?debug=1) — was inline styles on the header div + span. */ .analytics-debug-title { color: #fff; font-weight: bold; margin-bottom: 4px; } .analytics-debug-hint { font-weight: normal; color: #666; } /* D-pad grid cell placement — was inline grid-column/grid-row on each button. */ #dpadUp { grid-column: 2; grid-row: 1; } #dpadLeft { grid-column: 1; grid-row: 2; } #dpadDown { grid-column: 2; grid-row: 2; } #dpadRight { grid-column: 3; grid-row: 2; } /* Property-card attribute icons — was style="vertical-align:middle" on each SVG (main.js). */ .attr-icon { vertical-align: middle; } /* ============================================================ === [Measure Tool] buyer-facing ruler (v1, ephemeral) === Toggle + panel are glass surfaces. The parent #overlay has pointer-events:none, so interactive measure chrome must opt back in. Distance pills live in a non-interactive overlay layer, positioned by JS each frame. Positions are intentionally simple/tweakable — fine-tune in testing. ============================================================ */ /* --- Toggle button (entry point; standalone, NOT inside the frozen #v06TopRight) --- */ body.ui-v06 #v06MeasureToggle { position: fixed; top: 60px; /* sits just under the TopRight cluster (top:18, ~h40) */ right: 18px; z-index: 12; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid var(--glass-border); background: var(--vios-gold-faint); color: var(--vios-white-92); font-family: var(--ui-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; pointer-events: auto; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease; } body.ui-v06 #v06MeasureToggle:hover { border-color: var(--vios-gold); } body.ui-v06 #v06MeasureToggle.is-active { border-color: var(--vios-gold); color: var(--vios-gold); box-shadow: 0 0 0 1px var(--vios-gold) inset; } body.ui-v06 #v06MeasureToggle .v06-icon-measure { display: inline-flex; align-items: center; justify-content: center; } /* --- Controls panel (shown only while measuring) --- */ body.ui-v06 #v06MeasurePanel { display: none; } body.ui-v06.measure-active #v06MeasurePanel { display: block; position: fixed; top: 104px; /* directly below the toggle on desktop */ right: 18px; z-index: 13; width: 232px; padding: 14px 16px; pointer-events: auto; } body.ui-v06 .v06-measure-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } body.ui-v06 .v06-measure-panel-title { font-family: var(--ui-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vios-white-92); } body.ui-v06 .v06-measure-close { width: 24px; height: 24px; border: none; background: transparent; color: var(--vios-white-56); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 6px; } body.ui-v06 .v06-measure-close:hover { color: var(--vios-white-92); } /* Units segmented control */ body.ui-v06 .v06-measure-units { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--glass-border); border-radius: 10px; margin-bottom: 12px; } body.ui-v06 .v06-measure-unit-btn { flex: 1; height: 30px; border: none; border-radius: 7px; background: transparent; color: var(--vios-white-56); font-family: var(--ui-sans); font-size: 12px; font-weight: 500; cursor: pointer; transition: background 0.16s ease, color 0.16s ease; } body.ui-v06 .v06-measure-unit-btn.is-active { background: var(--vios-gold-faint); color: var(--vios-gold-deep); } /* Action buttons */ body.ui-v06 .v06-measure-actions { display: flex; gap: 8px; margin-bottom: 12px; } body.ui-v06 .v06-measure-actions .v06-pill { flex: 1; justify-content: center; cursor: pointer; } body.ui-v06 .v06-measure-height-btn.is-active { background: var(--vios-gold-faint); border-color: var(--vios-gold); color: var(--vios-gold-deep); } body.ui-v06 .v06-measure-hint { font-family: var(--ui-sans); font-size: 11px; line-height: 1.5; color: var(--vios-white-74); margin-bottom: 8px; } body.ui-v06 .v06-measure-note { font-family: var(--ui-sans); font-size: 10px; line-height: 1.5; color: var(--vios-white-56); padding-top: 8px; border-top: 1px solid var(--glass-border); } /* --- Distance readout pills (non-interactive overlay layer) --- */ body.ui-v06 #v06MeasureLabels { position: fixed; inset: 0; z-index: 11; pointer-events: none; overflow: hidden; } body.ui-v06 .v06-measure-label { position: absolute; top: 0; left: 0; white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: rgba(18, 18, 20, 0.74); border: 1px solid var(--glass-border); backdrop-filter: blur(6px); color: var(--vios-white-92); font-family: var(--ui-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; pointer-events: none; will-change: transform; } body.ui-v06 .v06-measure-label-preview { background: rgba(18, 18, 20, 0.54); border-color: rgba(var(--vios-gold-deep-rgb), 0.42); color: var(--vios-gold); opacity: 0.88; } /* Crosshair cursor while measuring (desktop). */ body.ui-v06.measure-active #viewerCanvas, body.ui-v06.measure-active canvas { cursor: crosshair; } /* --- Mobile: the standalone toggle is replaced by the in-TopBar Measure button (.v06-mtb-measure, between Share and Help). Hide this one on touch. When measuring, the panel shows as a bottom card (below). --- */ body.ui-v06.is-touch #v06MeasureToggle { display: none; } body.ui-v06.is-touch .v06-measure-toggle-label { display: none; } /* icon-only on mobile (desktop label) */ body.ui-v06.measure-active.is-touch #v06MeasurePanel { top: auto; right: calc(12px + var(--safe-right)); left: calc(12px + var(--safe-left)); bottom: calc(96px + var(--safe-bottom)); /* above the mobile RoomNavbar */ width: auto; } /* --- Idle fade (match the rest of the chrome) --- */ body.ui-v06.viewer-idle #v06MeasureToggle { opacity: 0.2; transition: opacity 0.32s ease; } /* --- Visibility gates: hide in embed (Rule #7), edit (non-preview), presentation --- Includes #v06MeasureLabels so stray distance pills can never paint over those experiences. NOTE: the load-bearing teardown is exitMeasureMode() on presentation entry (main.js → presentation-chrome enterPresentation); this CSS only hides the DOM artifacts, not the always-on-top 3D lines/markers or the canvas tap-intercept. */ body.ui-v06.embed-mode #v06MeasureToggle, body.ui-v06.embed-mode #v06MeasurePanel, body.ui-v06.embed-mode #v06MeasureLabels, body.ui-v06.edit-mode-active:not(.editor-preview-active) #v06MeasureToggle, body.ui-v06.edit-mode-active:not(.editor-preview-active) #v06MeasurePanel, body.ui-v06.edit-mode-active:not(.editor-preview-active) #v06MeasureLabels, body.ui-v06.presentation-active #v06MeasureToggle, body.ui-v06.presentation-active #v06MeasurePanel, body.ui-v06.presentation-active #v06MeasureLabels { display: none !important; } /* ============================================================================ === [Feature Bar] right-side feature rail + slide-out panels / mobile sheets Desktop: a vertical glass pill on the right edge, vertically centred; clicking an icon slides a 388px panel out to its LEFT (and shifts the top-right chrome + bottom RoomNavbar left to stay in the visible scene). Mobile: a horizontal pill above the bottom RoomNavbar; tapping opens a bottom sheet. One surface at a time. All styling is here (CSS-first); feature-bar.js only builds + wires DOM. ============================================================================ */ :root { --fb-rail-w: 54px; --fb-rail-right: 14px; --fb-panel-w: 388px; --fb-gap: 12px; --fb-reserved: 468px; /* viewport-right → panel-left: rail-right+rail-w+gap+panel-w */ } /* --- rail (shared) --- */ body.ui-v06 #v06FeatureBar .v06-fb-rail { position: fixed; z-index: 13; pointer-events: auto; display: flex; align-items: center; gap: 6px; transition: opacity 0.32s ease; } body.ui-v06:not(.is-touch) #v06FeatureBar .v06-fb-rail { right: calc(var(--fb-rail-right) + var(--safe-right)); top: 50%; transform: translateY(-50%); flex-direction: column; padding: 8px 7px; border-radius: 999px; } body.ui-v06.is-touch #v06FeatureBar .v06-fb-rail { left: calc(12px + var(--safe-left)); top: 50%; transform: translateY(-50%); flex-direction: column; padding: 6px 6px; border-radius: 999px; } body.ui-v06 .v06-fb-rail-btn { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 999px; color: var(--vios-white-74); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.16s ease, color 0.16s ease, transform 0.1s ease; } body.ui-v06 .v06-fb-rail-ico { display: flex; } /* MOBILE-ONLY smaller rail (desktop keeps the original 40px button / 21px icon). */ body.ui-v06.is-touch .v06-fb-rail-btn { width: 34px; height: 34px; } body.ui-v06.is-touch .v06-fb-rail-btn .v06-fb-svg { width: 18px; height: 18px; } body.ui-v06 .v06-fb-rail-btn:hover { background: var(--vios-gold-faint); color: var(--vios-gold-deep); } body.ui-v06 .v06-fb-rail-btn.is-active { background: var(--vios-gold-soft); color: var(--vios-gold-deep); } body.ui-v06 .v06-fb-rail-btn:active { transform: scale(0.92); } body.ui-v06 .v06-fb-rail-btn:focus-visible { outline: 2px solid var(--vios-gold); outline-offset: 2px; } body.ui-v06 .v06-fb-rail-dot { position: absolute; top: 7px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--vios-gold); box-shadow: 0 0 0 2px var(--glass-bg); } /* desktop hover tooltip to the LEFT of the rail */ body.ui-v06:not(.is-touch) .v06-fb-rail-btn::after { content: attr(data-label); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--vios-panel-strong); color: var(--vios-white-92); font-family: var(--ui-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity 0.14s ease; } body.ui-v06:not(.is-touch) .v06-fb-rail-btn:hover::after { opacity: 1; } body.ui-v06.feature-panel-open .v06-fb-rail-btn::after { display: none; } /* --- surface shell (one element; desktop panel vs mobile sheet via .is-touch) --- */ body.ui-v06 .v06-fb-surface { display: flex; flex-direction: column; overflow: hidden; z-index: 13; opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.36s cubic-bezier(0.32, 0.72, 0.21, 1), opacity 0.28s ease, visibility 0s linear 0.36s; } body.ui-v06 .v06-fb-surface.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: transform 0.36s cubic-bezier(0.32, 0.72, 0.21, 1), opacity 0.28s ease; } /* desktop: slide-out panel left of the rail */ body.ui-v06:not(.is-touch) .v06-fb-surface { position: fixed; top: 50%; right: calc(var(--fb-rail-right) + var(--fb-rail-w) + var(--fb-gap) + var(--safe-right)); width: var(--fb-panel-w); height: auto; max-height: min(720px, calc(100vh - 88px)); border-radius: 20px; transform: translateY(-50%) translateX(calc(100% + 28px)); } body.ui-v06:not(.is-touch) .v06-fb-surface.is-open { transform: translateY(-50%) translateX(0); } /* mobile: bottom sheet */ body.ui-v06.is-touch .v06-fb-surface { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 82vh; max-height: 82vh; border-radius: 24px 24px 0 0; border-bottom: none; z-index: 201; transform: translateY(100%); } body.ui-v06.is-touch .v06-fb-surface.is-open { transform: translateY(0); } body.ui-v06.is-touch .v06-fb-surface.is-measure { height: 48vh; max-height: 48vh; } /* --- scrim (mobile only) --- */ body.ui-v06 .v06-fb-scrim { position: fixed; inset: 0; z-index: 200; background: var(--vios-scrim); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.32s ease; } body.ui-v06.is-touch .v06-fb-scrim.is-open { opacity: 1; pointer-events: auto; } /* --- mobile drag grip --- */ body.ui-v06 .v06-fb-grip { display: none; } body.ui-v06.is-touch .v06-fb-grip { display: flex; justify-content: center; padding: 9px 0 3px; flex: 0 0 auto; touch-action: none; cursor: grab; } body.ui-v06 .v06-fb-grip span { width: 38px; height: 4px; border-radius: 4px; background: var(--glass-border); } /* --- header / body / footer --- */ body.ui-v06 .v06-fb-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; flex: 0 0 auto; border-bottom: 1px solid var(--vios-divider); } body.ui-v06 .v06-fb-head-ico { color: var(--vios-gold-deep); display: flex; flex: 0 0 auto; } body.ui-v06 .v06-fb-head-title { flex: 1 1 auto; min-width: 0; font-family: var(--ui-sans); font-size: 16px; font-weight: 500; letter-spacing: 0.01em; color: var(--vios-white-92); } body.ui-v06 .v06-fb-soon { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: var(--vios-accent); border: 1px solid var(--vios-accent-border); color: var(--vios-accent-text); font-family: var(--ui-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } body.ui-v06 .v06-fb-soon.is-pulse { animation: v06-fb-pulse 0.55s ease; } @keyframes v06-fb-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } } body.ui-v06 .v06-fb-close { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--vios-close-border); background: var(--vios-close-bg); color: var(--vios-close-color); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease; } body.ui-v06 .v06-fb-close:hover { color: var(--vios-white-92); border-color: var(--glass-border); } body.ui-v06 .v06-fb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; } body.ui-v06 .v06-fb-foot { flex: 0 0 auto; padding: 12px 16px 14px; border-top: 1px solid var(--vios-divider); display: flex; flex-direction: column; gap: 10px; } body.ui-v06.is-touch .v06-fb-foot { padding-bottom: calc(14px + var(--safe-bottom)); } /* --- segmented control --- */ body.ui-v06 .v06-fb-seg { display: flex; gap: 4px; padding: 4px; background: var(--vios-gold-faint); border: 1px solid var(--glass-border); border-radius: 999px; } body.ui-v06 .v06-fb-seg-btn { flex: 1 1 0; height: 32px; border: none; background: transparent; border-radius: 999px; cursor: pointer; font-family: var(--ui-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--vios-white-74); transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } body.ui-v06 .v06-fb-seg-btn.is-active { background: var(--glass-bg-strong); color: var(--vios-gold-deep); box-shadow: 0 1px 4px rgba(88, 60, 36, 0.12); } /* --- measure readout + hint --- */ body.ui-v06 .v06-fb-readout { border: 1px solid var(--glass-border); background: var(--vios-gold-faint); border-radius: 14px; padding: 16px; text-align: center; } body.ui-v06 .v06-fb-readout-value { font-family: var(--ui-sans); font-size: 30px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.1; color: var(--vios-gold-deep); } body.ui-v06 .v06-fb-readout-sub { margin-top: 4px; font-size: 12px; letter-spacing: 0.01em; color: var(--vios-white-56); } body.ui-v06 .v06-fb-hint { font-size: 12.5px; line-height: 1.45; color: var(--vios-white-74); background: var(--vios-accent); border: 1px solid var(--vios-accent-border); border-radius: 10px; padding: 10px 12px; } /* --- section labels + list rows --- */ body.ui-v06 .v06-fb-list-head { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; } body.ui-v06 .v06-fb-section-label { font-family: var(--ui-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vios-white-56); } body.ui-v06 .v06-fb-textbtn { border: none; background: transparent; cursor: pointer; font-family: var(--ui-sans); font-size: 12px; letter-spacing: 0.01em; color: var(--vios-gold-deep); } body.ui-v06 .v06-fb-textbtn:hover { text-decoration: underline; } body.ui-v06 .v06-fb-count { font-size: 11px; font-weight: 600; color: var(--vios-white-56); background: var(--vios-gold-faint); border-radius: 999px; padding: 1px 8px; } body.ui-v06 .v06-fb-list { display: flex; flex-direction: column; gap: 6px; } body.ui-v06 .v06-fb-empty { padding: 14px; text-align: center; font-size: 12.5px; line-height: 1.45; color: var(--vios-white-56); border: 1px dashed var(--glass-border); border-radius: 10px; } body.ui-v06 .v06-fb-list-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--vios-gold-faint); border: 1px solid var(--glass-border); } body.ui-v06 .v06-fb-list-ico { display: flex; flex: 0 0 auto; color: var(--vios-gold-deep); } body.ui-v06 .v06-fb-list-label { flex: 1 1 auto; font-size: 13px; color: var(--vios-white-74); } body.ui-v06 .v06-fb-list-value { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--vios-white-92); } body.ui-v06 .v06-fb-list-del { border: none; background: transparent; cursor: pointer; padding: 4px; border-radius: 6px; display: flex; color: var(--vios-white-56); transition: background 0.14s ease, color 0.14s ease; } body.ui-v06 .v06-fb-list-del:hover { color: var(--vios-danger); background: var(--vios-danger-bg); } /* --- CTA buttons --- */ body.ui-v06 .v06-fb-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border-radius: 12px; cursor: pointer; border: 1px solid var(--glass-border); background: var(--glass-bg-strong); color: var(--vios-gold-deep); font-family: var(--ui-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease, opacity 0.16s ease; } body.ui-v06 .v06-fb-cta:hover { background: var(--vios-gold-soft); } body.ui-v06 .v06-fb-cta:active { transform: translateY(1px); } body.ui-v06 .v06-fb-cta-primary { border-color: transparent; background: var(--v06-button-primary-bg); color: var(--vios-cta-fg); box-shadow: 0 2px 8px rgba(88, 60, 36, 0.16); } body.ui-v06 .v06-fb-cta-primary:hover { background: var(--v06-button-primary-bg); box-shadow: 0 4px 14px rgba(88, 60, 36, 0.22); } body.ui-v06 .v06-fb-cta:disabled { opacity: 0.5; cursor: default; box-shadow: none; transform: none; } body.ui-v06 .v06-fb-foot-actions { display: flex; gap: 8px; } body.ui-v06 .v06-fb-foot-actions .v06-fb-cta { height: 42px; font-size: 12px; } body.ui-v06 .is-soon-flash { animation: v06-fb-flash 0.5s ease; } @keyframes v06-fb-flash { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 2px var(--vios-accent-border) inset; } } /* --- chat (Concierge + Reimagine) --- */ body.ui-v06 .v06-fb-chat { display: flex; flex-direction: column; gap: 12px; min-height: 320px; justify-content: flex-end; } body.ui-v06 .v06-fb-msg { display: flex; gap: 8px; align-items: flex-end; } body.ui-v06 .v06-fb-msg-ai { justify-content: flex-start; } body.ui-v06 .v06-fb-msg-me { justify-content: flex-end; } body.ui-v06 .v06-fb-msg-av { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--vios-gold-faint); border: 1px solid var(--glass-border); color: var(--vios-gold-deep); } body.ui-v06 .v06-fb-bubble { max-width: 80%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; letter-spacing: 0.01em; } body.ui-v06 .v06-fb-msg-ai .v06-fb-bubble { background: var(--vios-gold-faint); border: 1px solid var(--glass-border); color: var(--vios-white-92); border-bottom-left-radius: 5px; } body.ui-v06 .v06-fb-msg-me .v06-fb-bubble { background: var(--v06-button-primary-bg); color: var(--vios-cta-fg); border-bottom-right-radius: 5px; } body.ui-v06 .v06-fb-bubble b { font-weight: 600; } body.ui-v06 .v06-fb-bubble-note { display: block; margin-top: 8px; font-size: 11.5px; color: var(--vios-white-56); } body.ui-v06 .v06-fb-bubble-rich { display: flex; flex-direction: column; gap: 8px; } body.ui-v06 .v06-fb-attach { width: 100%; height: 92px; border-radius: 10px; } /* --- chips + composer --- */ body.ui-v06 .v06-fb-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; } body.ui-v06 .v06-fb-chip { border: 1px solid var(--vios-accent-border); background: var(--vios-accent); color: var(--vios-accent-text); border-radius: 999px; padding: 7px 12px; cursor: pointer; font-family: var(--ui-sans); font-size: 12px; letter-spacing: 0.01em; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } body.ui-v06 .v06-fb-chip:hover { background: var(--vios-gold-soft); } body.ui-v06 .v06-fb-chip.is-active { background: var(--vios-gold-soft); border-color: var(--vios-gold); color: var(--vios-gold-deep); } body.ui-v06 .v06-fb-presets { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; } body.ui-v06 .v06-fb-presets .v06-fb-chip { flex: 0 0 auto; } body.ui-v06 .v06-fb-composer { display: flex; align-items: center; gap: 8px; } body.ui-v06 .v06-fb-input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--vios-input-border); background: var(--vios-input-bg); color: var(--vios-white-92); font-family: var(--ui-sans); font-size: 13px; letter-spacing: 0.01em; outline: none; } body.ui-v06 .v06-fb-input::placeholder { color: var(--vios-white-56); } body.ui-v06 .v06-fb-input:focus { border-color: var(--vios-gold); } /* iOS auto-zooms inputs with font-size < 16px on focus — pin to 16px on touch. */ body.ui-v06.is-touch .v06-fb-input, body.ui-v06.is-touch .v06-fb-link { font-size: 16px; } body.ui-v06 .v06-fb-iconbtn, body.ui-v06 .v06-fb-attach-btn { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--vios-gold-deep); transition: background 0.15s ease; } body.ui-v06 .v06-fb-iconbtn:hover, body.ui-v06 .v06-fb-attach-btn:hover { background: var(--glass-bg-strong); } body.ui-v06 .v06-fb-send { border-color: transparent; background: var(--v06-button-primary-bg); color: var(--vios-cta-fg); } /* --- thumbnails (gradient placeholders) --- */ body.ui-v06 .v06-fb-thumb { position: relative; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #d9c4b0, #b89a82); } body.ui-v06 .v06-fb-thumb-1 { background: linear-gradient(135deg, #e7d3bf, #c69f86); } body.ui-v06 .v06-fb-thumb-2 { background: linear-gradient(135deg, #cfd8d2, #9fb0a8); } body.ui-v06 .v06-fb-thumb-3 { background: linear-gradient(135deg, #e6d6c0, #bfa07f); } body.ui-v06 .v06-fb-thumb-4 { background: linear-gradient(135deg, #d8ccd6, #a896a6); } body.ui-v06 .v06-fb-thumb-src { background: linear-gradient(135deg, #cdbba6, #9c8064); } /* --- Reimagine variations grid --- */ body.ui-v06 .v06-fb-variations { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } body.ui-v06 .v06-fb-variation { aspect-ratio: 4 / 3; cursor: pointer; } body.ui-v06 .v06-fb-variation-tag { position: absolute; left: 6px; bottom: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.03em; color: #fff; background: rgba(22, 19, 15, 0.5); padding: 2px 7px; border-radius: 999px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* --- Floor Plan --- */ body.ui-v06 .v06-fb-plan-caption { font-size: 12px; letter-spacing: 0.01em; color: var(--vios-white-56); } body.ui-v06 .v06-fb-plan { display: flex; flex-direction: column; gap: 10px; } body.ui-v06 .v06-fb-plan-svg { width: 100%; height: auto; display: block; background: var(--vios-map-bg); border: 1px solid var(--glass-border); border-radius: 14px; } body.ui-v06 .v06-fb-plan-frame { fill: none; stroke: var(--vios-map-grid); stroke-width: 1.5; } body.ui-v06 .v06-fb-cell { cursor: pointer; } body.ui-v06 .v06-fb-cell-rect { fill: var(--vios-map-poi-bg); stroke: var(--vios-map-poi-border); stroke-width: 1.2; opacity: 0.55; transition: fill 0.15s ease, opacity 0.15s ease, stroke 0.15s ease; } body.ui-v06 .v06-fb-cell:hover .v06-fb-cell-rect { opacity: 0.82; } body.ui-v06 .v06-fb-cell.is-here .v06-fb-cell-rect { stroke: var(--vios-gold); } body.ui-v06 .v06-fb-cell.is-sel .v06-fb-cell-rect { fill: var(--vios-gold-soft); stroke: var(--vios-gold); stroke-width: 1.6; opacity: 1; } body.ui-v06 .v06-fb-cell-label { font-family: var(--ui-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; fill: var(--vios-white-74); pointer-events: none; } body.ui-v06 .v06-fb-cell.is-sel .v06-fb-cell-label { fill: var(--vios-gold-deep); } body.ui-v06 .v06-fb-here-halo { fill: var(--vios-gold-soft); animation: v06-fb-halo 1.8s ease-in-out infinite; } body.ui-v06 .v06-fb-here-glyph { fill: var(--vios-gold); } body.ui-v06 .v06-fb-here-dot { fill: #fff; } @keyframes v06-fb-halo { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } } body.ui-v06 .v06-fb-plan-legend { display: flex; gap: 16px; font-size: 11px; color: var(--vios-white-56); } body.ui-v06 .v06-fb-legend-item { display: inline-flex; align-items: center; gap: 6px; } body.ui-v06 .v06-fb-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } body.ui-v06 .v06-fb-legend-here { background: var(--vios-gold); } body.ui-v06 .v06-fb-legend-sel { background: var(--vios-gold-soft); border: 1px solid var(--vios-gold); } /* --- Saved: link row + saved-view grid --- */ body.ui-v06 .v06-fb-link-row { display: flex; gap: 8px; } body.ui-v06 .v06-fb-link { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--vios-input-border); background: var(--vios-input-bg); color: var(--vios-white-74); font-family: var(--ui-sans); font-size: 12px; letter-spacing: 0.01em; text-overflow: ellipsis; outline: none; } body.ui-v06 .v06-fb-link-copy { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--vios-gold-deep); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } body.ui-v06 .v06-fb-link-copy:hover { background: var(--glass-bg-strong); } body.ui-v06 .v06-fb-link-copy.is-done { color: var(--vios-success); } body.ui-v06 .v06-fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } body.ui-v06 .v06-fb-view-card { display: flex; flex-direction: column; gap: 5px; } body.ui-v06 .v06-fb-view-card .v06-fb-thumb { aspect-ratio: 4 / 3; } body.ui-v06 .v06-fb-view-star { position: absolute; top: 6px; right: 6px; display: flex; color: #fff; opacity: 0.92; } body.ui-v06 .v06-fb-view-label { font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--vios-white-92); } body.ui-v06 .v06-fb-view-meta { font-size: 11px; color: var(--vios-white-56); } /* --- Reimagine scene marquee (everything outside dimmed) --- */ body.ui-v06 .v06-fb-marquee { position: fixed; inset: 0; z-index: 11; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } body.ui-v06 .v06-fb-marquee.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; } body.ui-v06 .v06-fb-marquee-box { position: absolute; top: 50%; left: 50%; width: min(46vw, 520px); height: min(42vh, 380px); transform: translate(-50%, -50%); border: 1.5px dashed var(--vios-gold); border-radius: 8px; box-shadow: 0 0 0 100vmax rgba(22, 19, 15, 0.46); } body.ui-v06:not(.is-touch).feature-panel-open .v06-fb-marquee-box { transform: translate(calc(-50% - (var(--fb-reserved) / 2)), -50%); } body.ui-v06 .v06-fb-marquee-corner { position: absolute; width: 14px; height: 14px; border: 2px solid var(--vios-gold); } body.ui-v06 .v06-fb-marquee-corner-tl { top: -2px; left: -2px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; } body.ui-v06 .v06-fb-marquee-corner-tr { top: -2px; right: -2px; border-left: none; border-bottom: none; border-radius: 0 4px 0 0; } body.ui-v06 .v06-fb-marquee-corner-bl { bottom: -2px; left: -2px; border-right: none; border-top: none; border-radius: 0 0 0 4px; } body.ui-v06 .v06-fb-marquee-corner-br { bottom: -2px; right: -2px; border-left: none; border-top: none; border-radius: 0 0 4px 0; } body.ui-v06 .v06-fb-marquee-tag { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 5px 11px; border-radius: 999px; background: var(--vios-panel-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); color: var(--vios-gold-deep); font-family: var(--ui-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* --- desktop chrome shift when a panel is open --- */ body.ui-v06 #v06TopRight, body.ui-v06 #v06RoomNavbar { transition: transform 0.34s cubic-bezier(0.32, 0.72, 0.21, 1), opacity 0.32s ease; } /* Chrome no longer shifts left when a feature panel opens — the panel overlays the scene and the top-right actions + RoomNavbar stay put (removed the translateX). */ /* Keep the chrome-shift animating even when idle: the existing idle rule (.viewer-idle #v06RoomNavbar) only transitions opacity and would otherwise make the transform snap. This more-specific rule restores the transform ease. */ body.ui-v06.viewer-idle.feature-panel-open #v06TopRight, body.ui-v06.viewer-idle.feature-panel-open #v06RoomNavbar { transition: transform 0.34s cubic-bezier(0.32, 0.72, 0.21, 1), opacity 0.32s ease; } /* The feature rail stays full-opacity when idle (desktop + mobile) — no idle fade. */ /* --- the Feature Bar is the single home for Measure: hide the legacy standalone toggle + panel (the on-scene #v06MeasureLabels overlay stays) --- */ body.ui-v06.has-feature-bar #v06MeasureToggle, body.ui-v06.has-feature-bar #v06MeasurePanel, body.ui-v06.has-feature-bar .v06-mtb-measure { display: none !important; } /* --- visibility gates: mirror the other buyer chrome (no editor/embed/presentation) --- */ body.ui-v06.embed-mode #v06FeatureBar, body.ui-v06.edit-mode-active:not(.editor-preview-active) #v06FeatureBar, body.ui-v06.presentation-active #v06FeatureBar, body.ui-v06.experience-presentation #v06FeatureBar { display: none !important; } /* ============================================================================ === [Movement fade — EXPERIMENT] mobile, joystick-driven === While the move joystick is held (#v06MoveStick gains .is-active on pointerdown, loses it on release), fade the obstructing chrome out for an immersive view; it fades back in when released. Smooth BOTH directions — the opacity transition lives on the elements themselves (not only the active-state rule), so the reappearance isn't abrupt like the idle fade. The joystick itself stays visible (it's in use). Tunable: the 0.12 fade target below. REVERT: delete this block. ============================================================================ */ body.ui-v06.is-touch #v06MobileRoomNavbar, body.ui-v06.is-touch #v06MobileTopBar, body.ui-v06.is-touch #v06FeatureBar .v06-fb-rail { transition: opacity 0.35s ease; } body.ui-v06.is-touch:has(#v06MoveStick.is-active) #v06MobileRoomNavbar, body.ui-v06.is-touch:has(#v06MoveStick.is-active) #v06MobileTopBar, body.ui-v06.is-touch:has(#v06MoveStick.is-active) #v06FeatureBar .v06-fb-rail { opacity: 0.12; } /* === Asset Library overlay (editor section) ============================== */ /* CSS-gated: the whole section is hidden unless the feature flag set body.assets-enabled, so the core real-estate editor is byte-for-byte unaffected when the flag is off. */ body:not(.assets-enabled) [data-v06-section="assets"] { display: none !important; } .v06-asset-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; cursor: pointer; } .v06-asset-toggle input { accent-color: var(--vios-gold); cursor: pointer; } .v06-asset-row { display: flex; gap: 8px; margin-bottom: 10px; } .v06-asset-row .v06-editor-input { flex: 1; margin-bottom: 0; } .v06-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 10px; } .v06-asset-tile { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid rgba(217, 197, 178, 0.28); border-radius: 8px; background: rgba(255, 255, 255, 0.03); cursor: pointer; text-align: left; color: inherit; font: inherit; transition: border-color 0.15s ease, background 0.15s ease; } .v06-asset-tile:hover { border-color: var(--vios-gold); background: rgba(217, 197, 178, 0.10); } .v06-asset-tile-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 5px; background: rgba(0, 0, 0, 0.25); } .v06-asset-tile-thumb-empty { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--vios-gold-deep); } .v06-asset-tile-name { font-size: 11px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v06-asset-tile-meta { font-size: 10px; opacity: 0.6; } .v06-asset-divider { height: 1px; background: rgba(217, 197, 178, 0.18); margin: 12px 0; } .v06-asset-placements { display: flex; flex-direction: column; gap: 8px; } .v06-asset-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin-top: 8px; } .v06-asset-num { display: flex; flex-direction: column; gap: 2px; font-size: 10px; opacity: 0.75; } .v06-asset-num .v06-editor-input { margin-bottom: 0; width: 72px; }