/* ========================================================================== Lily AI — Demo UX CSS Scope: demo-only surfaces (skeletons, tour popovers, transitions, typing indicator, persona intro modal, deck animations). Linked from root.html.heex ONLY when DEMO_ENV=true. ========================================================================== */ /* -------------------------------------------------------------------------- 1. CUSTOM PROPERTIES (demo-scoped overrides, non-conflicting) -------------------------------------------------------------------------- */ :root { --lily-forest: hsl(145 60% 26%); --lily-forest-dark: hsl(145 60% 18%); --lily-forest-light: hsl(145 52% 92%); --lily-glass-bg: rgba(255, 255, 255, 0.72); --lily-glass-border: rgba(255, 255, 255, 0.5); --lily-radius: 18px; --lily-radius-sm: 10px; --lily-shadow: 0 8px 32px rgba(22, 83, 49, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6); --demo-shimmer-from: rgba(180, 220, 195, 0.0); --demo-shimmer-mid: rgba(180, 220, 195, 0.45); --demo-shimmer-to: rgba(180, 220, 195, 0.0); } /* -------------------------------------------------------------------------- 2. DRIVER.JS TOUR POPOVER — .lily-tour-popover -------------------------------------------------------------------------- */ /* Z-index fix: driver.js appends overlay + popover to at runtime. Force explicit stacking so the popover always sits ABOVE the overlay, regardless of any ancestor stacking context created by demo chrome. (driver.css sets popover to z-index:1000000000; we match + exceed overlay) */ .driver-overlay { z-index: 100000 !important; } .driver-popover { z-index: 100001 !important; position: fixed !important; } /* Override driver.js default theme */ .driver-popover.lily-tour-popover { background: var(--lily-glass-bg); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid var(--lily-glass-border); border-radius: var(--lily-radius); box-shadow: var(--lily-shadow); font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; color: hsl(145 60% 16%); max-width: 340px; padding: 1.25rem 1.5rem 1rem; } .driver-popover.lily-tour-popover .driver-popover-title { font-size: 1rem; font-weight: 700; color: var(--lily-forest-dark); margin-bottom: 0.4rem; letter-spacing: -0.01em; } .driver-popover.lily-tour-popover .driver-popover-description { font-size: 0.875rem; line-height: 1.55; color: hsl(145 30% 28%); } .driver-popover.lily-tour-popover .driver-popover-progress-text { font-size: 0.75rem; color: hsl(145 40% 40%); font-weight: 500; } .driver-popover.lily-tour-popover .driver-popover-footer { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; } .driver-popover.lily-tour-popover .driver-popover-btn-disabled { display: none; } /* Navigation buttons — driver.js v1 class names */ .driver-popover.lily-tour-popover .driver-popover-next-btn, .driver-popover.lily-tour-popover .driver-popover-prev-btn { background: var(--lily-forest); color: #fff; border: none; border-radius: var(--lily-radius-sm); padding: 0.4rem 1rem; font-size: 0.8125rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .driver-popover.lily-tour-popover .driver-popover-prev-btn { background: transparent; color: var(--lily-forest); border: 1.5px solid var(--lily-forest); } /* Keep backward-compat data-action selectors for any custom setups */ .driver-popover.lily-tour-popover button[data-action="previous"], .driver-popover.lily-tour-popover button[data-action="next"], .driver-popover.lily-tour-popover button[data-action="done"] { background: var(--lily-forest); color: #fff; border: none; border-radius: var(--lily-radius-sm); padding: 0.4rem 1rem; font-size: 0.8125rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .driver-popover.lily-tour-popover button[data-action="previous"] { background: transparent; color: var(--lily-forest); border: 1.5px solid var(--lily-forest); } .driver-popover.lily-tour-popover .driver-popover-navigation-btns { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; } .driver-popover.lily-tour-popover button:hover { filter: brightness(1.12); transform: translateY(-1px); } /* Close X */ .driver-popover.lily-tour-popover .driver-popover-close-btn { position: absolute; top: 0.6rem; right: 0.75rem; background: none; border: none; font-size: 1.1rem; color: hsl(145 20% 55%); cursor: pointer; line-height: 1; padding: 0; } /* Arrow — driver.js v1 uses a plain div with directional classes */ .driver-popover.lily-tour-popover .driver-popover-arrow { border-color: var(--lily-glass-bg); } .driver-popover.lily-tour-popover .driver-popover-arrow::before { border-color: var(--lily-glass-bg) transparent transparent transparent; } /* -------------------------------------------------------------------------- 3. SKELETON SHIMMER -------------------------------------------------------------------------- */ @keyframes lily-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .lily-skeleton { background: linear-gradient( 90deg, var(--demo-shimmer-from) 0%, var(--demo-shimmer-mid) 50%, var(--demo-shimmer-to) 100% ); background-color: hsl(145 20% 92%); background-size: 400px 100%; animation: lily-shimmer 1.6s linear infinite; border-radius: var(--lily-radius-sm); display: block; } /* Skeleton variants */ .lily-skeleton-line { height: 0.875rem; border-radius: 999px; margin-bottom: 0.5rem; } .lily-skeleton-line.short { width: 55%; } .lily-skeleton-line.medium { width: 75%; } .lily-skeleton-line.full { width: 100%; } .lily-skeleton-avatar { width: 2.75rem; height: 2.75rem; border-radius: 9999px; flex-shrink: 0; } .lily-skeleton-card { background-color: hsl(145 20% 94%); border-radius: var(--lily-radius); padding: 1.25rem; overflow: hidden; position: relative; } .lily-skeleton-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, var(--demo-shimmer-mid) 50%, transparent 100% ); background-size: 400px 100%; animation: lily-shimmer 1.6s linear infinite; } /* -------------------------------------------------------------------------- 4. PAGE / SECTION FADE-IN -------------------------------------------------------------------------- */ @keyframes lily-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .lily-fade-in { animation: lily-fade-in 0.32s ease both; } .lily-fade-in-fast { animation: lily-fade-in 0.18s ease both; } /* Staggered children fade */ .lily-stagger-children > * { opacity: 0; animation: lily-fade-in 0.28s ease forwards; } .lily-stagger-children > *:nth-child(1) { animation-delay: 0.04s; } .lily-stagger-children > *:nth-child(2) { animation-delay: 0.09s; } .lily-stagger-children > *:nth-child(3) { animation-delay: 0.14s; } .lily-stagger-children > *:nth-child(4) { animation-delay: 0.19s; } .lily-stagger-children > *:nth-child(5) { animation-delay: 0.24s; } .lily-stagger-children > *:nth-child(n+6) { animation-delay: 0.28s; } /* -------------------------------------------------------------------------- 5. LIVEVIEW PAGE TRANSITION -------------------------------------------------------------------------- */ /* Applied to #demo-tour-mount or any element that wants cross-nav transitions */ .lily-page-enter { animation: lily-fade-in 0.3s ease both; } .lily-page-exit { animation: lily-fade-in 0.2s ease reverse; } /* -------------------------------------------------------------------------- 6. DECK CARD SWIPE ANIMATION HELPERS -------------------------------------------------------------------------- */ @keyframes lily-swipe-left { to { transform: translateX(-140%) rotate(-18deg); opacity: 0; } } @keyframes lily-swipe-right { to { transform: translateX(140%) rotate(18deg); opacity: 0; } } @keyframes lily-swipe-up { to { transform: translateY(-100%) scale(0.88); opacity: 0; } } .lily-card-swipe-left { animation: lily-swipe-left 0.38s cubic-bezier(0.4,0,0.2,1) both; } .lily-card-swipe-right { animation: lily-swipe-right 0.38s cubic-bezier(0.4,0,0.2,1) both; } .lily-card-swipe-up { animation: lily-swipe-up 0.3s cubic-bezier(0.4,0,0.2,1) both; } /* -------------------------------------------------------------------------- 7. BUTTON PRESS FEEDBACK -------------------------------------------------------------------------- */ .lily-btn-press { transition: transform 0.1s ease, box-shadow 0.1s ease; } .lily-btn-press:active { transform: scale(0.96); box-shadow: 0 2px 8px rgba(22, 83, 49, 0.14); } /* -------------------------------------------------------------------------- 8. TYPING INDICATOR — .lily-typing -------------------------------------------------------------------------- */ .lily-typing { display: inline-flex; align-items: center; gap: 4px; padding: 0.5rem 0.875rem; background: var(--lily-glass-bg); border: 1px solid var(--lily-glass-border); backdrop-filter: blur(8px); border-radius: 1rem 1rem 1rem 0.25rem; width: fit-content; } .lily-typing span { display: inline-block; width: 6px; height: 6px; border-radius: 9999px; background: var(--lily-forest); opacity: 0.4; } @keyframes lily-dot-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-5px); opacity: 1; } } .lily-typing span:nth-child(1) { animation: lily-dot-bounce 1.1s ease-in-out 0.0s infinite; } .lily-typing span:nth-child(2) { animation: lily-dot-bounce 1.1s ease-in-out 0.2s infinite; } .lily-typing span:nth-child(3) { animation: lily-dot-bounce 1.1s ease-in-out 0.4s infinite; } /* -------------------------------------------------------------------------- 9. PERSONA INTRO MODAL -------------------------------------------------------------------------- */ .demo-intro-backdrop { position: fixed; inset: 0; z-index: 9000; background: rgba(18, 52, 30, 0.45); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; animation: lily-fade-in 0.22s ease; } .demo-intro-modal { background: var(--lily-glass-bg); backdrop-filter: blur(24px) saturate(1.5); border: 1px solid var(--lily-glass-border); border-radius: 22px; box-shadow: 0 24px 80px rgba(22, 83, 49, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7); display: grid; grid-template-columns: 1fr 1.1fr; max-width: 700px; width: 100%; overflow: hidden; animation: lily-fade-in 0.28s ease; } .demo-intro-left { background: linear-gradient(145deg, hsl(145 48% 88%), hsl(145 52% 94%)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; gap: 1rem; } .demo-intro-lottie { width: 120px; height: 120px; } .demo-intro-persona-badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lily-forest-dark); background: rgba(255,255,255,0.7); border-radius: 9999px; padding: 0.25rem 0.75rem; border: 1px solid rgba(22, 83, 49, 0.18); } .demo-intro-right { padding: 2rem 2rem 1.5rem; display: flex; flex-direction: column; justify-content: space-between; } .demo-intro-right h2 { font-family: "Space Grotesk", sans-serif; font-size: 1.25rem; font-weight: 700; color: hsl(145 60% 16%); letter-spacing: -0.02em; margin-bottom: 0.35rem; } .demo-intro-right p { font-size: 0.875rem; color: hsl(145 25% 32%); line-height: 1.6; margin-bottom: 0.75rem; } .demo-intro-right ul { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; } .demo-intro-right ul li { font-size: 0.8125rem; color: hsl(145 30% 30%); display: flex; align-items: flex-start; gap: 0.5rem; } .demo-intro-right ul li::before { content: "✦"; font-size: 0.6rem; color: var(--lily-forest); margin-top: 0.2rem; flex-shrink: 0; } .demo-intro-dots { display: flex; align-items: center; gap: 6px; } .demo-intro-dot { width: 7px; height: 7px; border-radius: 9999px; background: hsl(145 30% 78%); transition: background 0.2s ease, transform 0.2s ease; cursor: pointer; } .demo-intro-dot.active { background: var(--lily-forest); transform: scale(1.3); } .demo-intro-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.75rem; } .demo-intro-btn { background: var(--lily-forest); color: #fff; border: none; border-radius: var(--lily-radius-sm); padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 600; font-family: "Space Grotesk", sans-serif; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; white-space: nowrap; } .demo-intro-btn:hover { filter: brightness(1.1); } .demo-intro-btn:active { transform: scale(0.97); } .demo-intro-btn-ghost { background: transparent; color: var(--lily-forest); border: 1.5px solid hsl(145 40% 72%); border-radius: var(--lily-radius-sm); padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color 0.15s ease; } .demo-intro-btn-ghost:hover { border-color: var(--lily-forest); } /* ── mobile collapse ── */ @media (max-width: 540px) { .demo-intro-modal { grid-template-columns: 1fr; } .demo-intro-left { padding: 1.5rem 1.5rem 1rem; } } /* -------------------------------------------------------------------------- 10. LOADING OVERLAY -------------------------------------------------------------------------- */ .lily-loading-overlay { position: absolute; inset: 0; z-index: 100; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; border-radius: inherit; animation: lily-fade-in 0.18s ease; } @keyframes lily-spin-ring { to { transform: rotate(360deg); } } .lily-loading-ring { width: 36px; height: 36px; border: 3px solid hsl(145 30% 85%); border-top-color: var(--lily-forest); border-radius: 9999px; animation: lily-spin-ring 0.7s linear infinite; } /* -------------------------------------------------------------------------- 11. DEMO TOUR GUIDE BUTTON (floating "Guide" affordance) -------------------------------------------------------------------------- */ .demo-guide-btn { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 8900; background: var(--lily-forest); color: #fff; border: none; border-radius: 9999px; padding: 0.55rem 1.1rem 0.55rem 0.85rem; font-size: 0.8125rem; font-weight: 600; font-family: "Space Grotesk", sans-serif; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; box-shadow: 0 4px 18px rgba(22, 83, 49, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease; } .demo-guide-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(22, 83, 49, 0.32); } .demo-guide-btn .progress-arc { font-size: 0.72rem; opacity: 0.8; } /* -------------------------------------------------------------------------- 12. TOUR PROGRESS BAR (inside DemoTourLive) -------------------------------------------------------------------------- */ .demo-progress-bar { height: 3px; border-radius: 9999px; background: hsl(145 30% 86%); overflow: hidden; margin-bottom: 0.5rem; } .demo-progress-fill { height: 100%; background: var(--lily-forest); border-radius: 9999px; transition: width 0.4s cubic-bezier(0.4,0,0.2,1); } /* -------------------------------------------------------------------------- 13. DEMO INTAKE GATE — DemoIntakeLive (/demo/start) -------------------------------------------------------------------------- */ .demo-intake-backdrop { position: fixed; inset: 0; z-index: 9000; background: rgba(10, 30, 15, 0.62); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto; } .demo-intake-modal { background: var(--lily-glass-bg); border: 1px solid var(--lily-glass-border); box-shadow: var(--lily-shadow); backdrop-filter: blur(20px); border-radius: 24px; width: 100%; max-width: 560px; padding: 2rem 2rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; max-height: 90vh; overflow-y: auto; } .demo-intake-header { display: flex; flex-direction: column; gap: 0.35rem; } .demo-intake-logo { display: flex; align-items: center; gap: 0.5rem; } .demo-intake-brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1rem; color: var(--lily-forest); letter-spacing: -0.01em; } .demo-intake-tagline { font-size: 0.82rem; color: hsl(145 25% 40%); margin: 0; } /* Synthetic data disclaimer */ .demo-intake-disclaimer { display: flex; gap: 0.6rem; align-items: flex-start; background: hsl(145 40% 95%); border: 1px solid hsl(145 35% 80%); border-radius: var(--lily-radius-sm); padding: 0.75rem 0.875rem; } .demo-intake-disclaimer-icon { font-size: 0.9rem; color: var(--lily-forest); flex-shrink: 0; margin-top: 1px; } .demo-intake-disclaimer p { margin: 0; font-size: 0.78rem; color: hsl(145 40% 28%); line-height: 1.45; } /* Question fieldsets */ .demo-intake-questions { display: flex; flex-direction: column; gap: 1.1rem; } .demo-intake-question { border: none; margin: 0; padding: 0; } .demo-intake-q-label { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem; font-weight: 600; color: hsl(145 50% 22%); margin-bottom: 0.5rem; } .demo-intake-required { color: hsl(0 60% 48%); margin-left: 2px; font-size: 0.75rem; } .demo-intake-options { display: flex; flex-direction: column; gap: 0.375rem; } .demo-intake-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.875rem; border: 1.5px solid hsl(145 20% 84%); border-radius: var(--lily-radius-sm); background: white; cursor: pointer; font-size: 0.82rem; color: hsl(145 30% 28%); text-align: left; transition: border-color 0.12s, background 0.12s, transform 0.1s; font-family: inherit; line-height: 1.4; } .demo-intake-option:hover { border-color: hsl(145 40% 55%); background: hsl(145 35% 97%); } .demo-intake-option.selected { border-color: var(--lily-forest); background: hsl(145 40% 94%); color: hsl(145 55% 18%); font-weight: 600; } .demo-intake-option:active { transform: scale(0.99); } .demo-intake-option-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid hsl(145 30% 60%); flex-shrink: 0; transition: background 0.12s, border-color 0.12s; } .demo-intake-option.selected .demo-intake-option-dot { background: var(--lily-forest); border-color: var(--lily-forest); } /* ToS checkbox */ .demo-intake-tos { border-top: 1px solid hsl(145 20% 88%); padding-top: 1rem; } .demo-intake-tos-label { display: flex; align-items: flex-start; gap: 0.65rem; cursor: pointer; font-size: 0.8rem; color: hsl(145 25% 35%); line-height: 1.45; } .demo-intake-checkbox { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--lily-forest); flex-shrink: 0; cursor: pointer; } .demo-intake-link { color: var(--lily-forest); text-decoration: underline; text-underline-offset: 2px; } .demo-intake-link:hover { color: var(--lily-forest-dark); } /* Error display */ .demo-intake-errors { background: hsl(0 60% 96%); border: 1px solid hsl(0 50% 80%); border-radius: var(--lily-radius-sm); padding: 0.65rem 0.875rem; } .demo-intake-errors p { margin: 0; font-size: 0.79rem; color: hsl(0 55% 36%); line-height: 1.4; } .demo-intake-errors p + p { margin-top: 0.3rem; } /* Footer / CTA */ .demo-intake-footer { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding-top: 0.5rem; } .demo-intake-hint { margin: 0; font-size: 0.72rem; color: hsl(145 20% 54%); text-align: center; } /* -------------------------------------------------------------------------- 14. DEMO INTAKE WIZARD (one-question-per-page layout) Replaces the old all-on-one-page .demo-intake-modal card with a step-by-step wizard that mirrors PreferenceIntakeLive. Used by DemoIntakeLive. -------------------------------------------------------------------------- */ /* Full-screen centered wizard card (replaces .demo-intake-modal for wizard flow) */ .demo-intake-wizard { background: var(--lily-glass-bg); border: 1px solid var(--lily-glass-border); box-shadow: var(--lily-shadow); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-radius: 24px; width: 100%; max-width: 520px; padding: 2rem 2rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; animation: lily-fade-in 0.25s ease; } /* Progress bar area */ .demo-intake-progress { display: flex; flex-direction: column; gap: 0.35rem; } .demo-intake-progress-labels { display: flex; justify-content: space-between; align-items: center; } .demo-intake-step-label { font-size: 0.72rem; font-weight: 600; color: hsl(145 35% 40%); letter-spacing: 0.01em; } .demo-intake-step-pct { font-size: 0.72rem; font-weight: 700; color: var(--lily-forest); } .demo-intake-progress-track { height: 4px; border-radius: 9999px; background: hsl(145 25% 88%); overflow: hidden; } .demo-intake-progress-fill { height: 100%; background: var(--lily-forest); border-radius: 9999px; transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); min-width: 4px; } /* Individual question step container */ .demo-intake-question-step { display: flex; flex-direction: column; gap: 0.75rem; animation: lily-fade-in 0.2s ease; } /* Question header (label + hint) */ .demo-intake-q-header { display: flex; flex-direction: column; gap: 0.2rem; } .demo-intake-q-hint { margin: 0; font-size: 0.76rem; color: hsl(145 25% 48%); font-style: italic; } /* Checkmark badge inside selected option */ .demo-intake-option-check { margin-left: auto; font-size: 0.85rem; color: var(--lily-forest); font-weight: 700; flex-shrink: 0; } /* Back navigation row */ .demo-intake-back-row { display: flex; justify-content: flex-start; padding-top: 0.25rem; } .demo-intake-back-btn { background: none; border: none; padding: 0.25rem 0.5rem; font-size: 0.8rem; color: hsl(145 30% 48%); cursor: pointer; font-family: inherit; border-radius: var(--lily-radius-sm); transition: color 0.12s, background 0.12s; } .demo-intake-back-btn:hover { color: var(--lily-forest); background: hsl(145 35% 94%); } /* ToS/Privacy gate step */ .demo-intake-tos-step { display: flex; flex-direction: column; gap: 1rem; animation: lily-fade-in 0.2s ease; } /* ToS form wrapper */ .demo-intake-tos-form { display: flex; flex-direction: column; gap: 1rem; } /* Mobile adjustments */ @media (max-width: 540px) { .demo-intake-wizard { padding: 1.5rem 1.25rem 1.25rem; border-radius: 18px; max-width: 100%; } } /* -------------------------------------------------------------------------- 15. MOBILE RESPONSIVE OVERRIDES Fix horizontal overflow on mobile viewports while preserving desktop fidelity -------------------------------------------------------------------------- */ /* Demo chrome mobile responsive */ @media (max-width: 768px) { .demo-bar { font-size: 10px !important; padding: 0 8px !important; gap: 8px !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; } .demo-brand { font-size: 10px !important; gap: 5px !important; white-space: nowrap; flex-shrink: 0; } .demo-brand img { height: 14px !important; } .demo-brand .pill { font-size: 8px !important; padding: 1px 5px !important; } .demo-bar .sep { display: none !important; } .demo-bar .scenario { display: none !important; } .demo-bar .right { gap: 5px !important; } .persona-switch { gap: 2px !important; padding: 2px !important; flex-wrap: nowrap !important; } .persona-switch button { padding: 4px 7px !important; font-size: 9px !important; } .persona-switch .dot { width: 5px !important; height: 5px !important; } .demo-bar button, .demo-bar a { padding: 4px 7px !important; font-size: 9px !important; gap: 3px !important; } .demo-bar button svg, .demo-bar a svg { width: 9px !important; height: 9px !important; } } /* App shell and sidebar mobile responsive */ @media (max-width: 768px) { .lily-demo-ref .app-shell { flex-direction: column !important; } .lily-demo-ref .sidebar { width: 100% !important; height: auto !important; border-right: none !important; border-bottom: 1px solid hsl(var(--border)) !important; padding: 10px !important; overflow-x: auto !important; flex-direction: row !important; gap: 8px !important; } .lily-demo-ref .sidebar > * { display: none; /* Hide sidebar content on mobile by default */ } .lily-demo-ref .sidebar .sb-brand { display: flex !important; padding: 4px 8px !important; } .lily-demo-ref .sidebar .sb-brand img { height: 20px !important; } .lily-demo-ref .main { overflow-x: hidden !important; } .lily-demo-ref .page { max-width: 100% !important; padding: 16px !important; } .lily-demo-ref .page-head { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 16px !important; } .lily-demo-ref .page-head h1 { font-size: 22px !important; } } /* Grid layouts - force single column on mobile */ @media (max-width: 768px) { /* Target ALL grid layouts with inline styles */ [style*="grid-template-columns"], .grid[style*="grid-template-columns"] { display: flex !important; flex-direction: column !important; gap: 16px !important; } /* Ensure grid items don't overflow */ [style*="grid-template-columns"] > *, .grid[style*="grid-template-columns"] > * { max-width: 100% !important; min-width: 0 !important; } .lily-demo-ref [style*="display: grid"] { display: flex !important; flex-direction: column !important; gap: 16px !important; } } /* Stat tiles and cards mobile responsive */ @media (max-width: 768px) { .lily-demo-ref .stat, .lily-demo-ref .card { min-width: 0 !important; max-width: 100% !important; } .lily-demo-ref .stat-num, .lily-demo-ref .stat h3 { font-size: 1.25rem !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } .lily-demo-ref .stat p, .lily-demo-ref .card p { font-size: 0.75rem !important; word-wrap: break-word !important; } } /* Messages UI mobile responsive */ @media (max-width: 768px) { .lily-demo-ref .messages-container, .lily-demo-ref .conversations-pane { max-width: 100% !important; } .lily-demo-ref .message-bubble { max-width: 85% !important; word-wrap: break-word !important; } .lily-demo-ref .conversations-header { flex-wrap: wrap !important; gap: 8px !important; } .lily-demo-ref .conversations-header button { font-size: 11px !important; padding: 6px 10px !important; } } /* Marketing container mobile responsive */ @media (max-width: 768px) { .mkt-container { max-width: 100% !important; padding: 0 16px !important; } /* Force all max-width containers to 100% on mobile */ [style*="max-width:1240px"], [style*="max-width: 1240px"], [style*="max-width:1320px"], [style*="max-width: 1320px"], [style*="max-width:920px"], [style*="max-width: 920px"] { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; } /* Hero section spacing adjustments */ section[style*="padding:72px"] { padding: 40px 16px !important; } /* Absolute positioned floating cards - constrain within viewport */ .absolute[style*="left:-"], .absolute[style*="right:-"], .absolute[style*="left: -"], .absolute[style*="right: -"] { left: 8px !important; right: auto !important; } /* Relative containers with fixed max-width */ .relative.mx-auto[style*="max-width"] { max-width: 100% !important; padding: 0 8px !important; } } /* Driver.js tour popover mobile responsive */ @media (max-width: 480px) { .driver-popover.lily-tour-popover { max-width: calc(100vw - 2rem) !important; padding: 1rem 1.25rem 0.875rem !important; } .driver-popover.lily-tour-popover .driver-popover-title { font-size: 0.9rem !important; } .driver-popover.lily-tour-popover .driver-popover-description { font-size: 0.8125rem !important; } .driver-popover.lily-tour-popover .driver-popover-footer { flex-wrap: wrap !important; } .driver-popover.lily-tour-popover .driver-popover-close-btn { top: 0.5rem !important; right: 0.5rem !important; } } /* Ensure no element causes horizontal overflow */ @media (max-width: 768px) { /* Global overflow prevention */ * { max-width: 100%; box-sizing: border-box; } html { overflow-x: hidden !important; max-width: 100vw !important; } body { overflow-x: hidden !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; } /* Main content wrapper */ main { overflow-x: hidden !important; max-width: 100vw !important; } .lily-demo-ref { overflow-x: hidden !important; max-width: 100vw !important; } .lily-demo-ref * { max-width: 100%; box-sizing: border-box; } .lily-demo-ref img { max-width: 100% !important; height: auto !important; } /* Prevent fixed widths from causing overflow */ .lily-demo-ref [style*="width:"], .lily-demo-ref [style*="min-width:"], .lily-demo-ref [style*="max-width:"], [style*="width:"], [style*="min-width:"], [style*="max-width:"] { max-width: 100% !important; min-width: 0 !important; } /* Force all fixed/absolute positioned elements within viewport */ .lily-demo-ref *[style*="position: fixed"], .lily-demo-ref *[style*="position:fixed"], *[style*="position: fixed"], *[style*="position:fixed"] { max-width: 100vw !important; left: 0 !important; right: 0 !important; } /* Section and div containers */ section, div { max-width: 100vw !important; } /* Flex and grid containers */ .flex, .grid, [class*="flex"], [class*="grid"] { max-width: 100vw !important; } }