/** * Compass Chat Widget — Mobile Styles * Loaded only on screens ≤ 480px via media attribute. * * When expanded, the JS moves the container to and adds * .compass-mobile-expanded. Everything else on the page is hidden. * The container becomes a simple full-viewport flex column: * * ┌─── header (fixed height) ───┐ * │ │ * │ messages (scrolls) │ * │ │ * └─── input (fixed height) ───┘ */ /* ================================================================ 0. ISOLATION ================================================================ */ .lydia-compass-chat-container *, .lydia-compass-chat-container *::before, .lydia-compass-chat-container *::after { box-sizing: border-box; } /* ================================================================ 1. BASE MOBILE — compact layout (before expand) ================================================================ */ .lydia-compass-chat-container { border-radius: 16px !important; overflow: hidden; } .compass-bg-circle { display: none !important; } /* ================================================================ 2. FULL-SCREEN TAKEOVER — .compass-mobile-expanded The container lives on at this point. We nuke every desktop style and rebuild as a simple flex column. ================================================================ */ .lydia-compass-chat-container.compass-mobile-expanded { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: 100vw !important; max-height: 100dvh !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; z-index: 2147483647 !important; /* Direct gradient on the container — no reliance on ::before/::after */ background: linear-gradient(83.66deg, #0C418F 5.15%, #C76AC0 100.22%) !important; /* Flex column layout */ display: flex !important; flex-direction: column !important; /* No scrolling on the container itself */ overflow: hidden !important; } /* Hide the decorative pseudo-elements — the container bg does the job */ .lydia-compass-chat-container.compass-mobile-expanded::before, .lydia-compass-chat-container.compass-mobile-expanded::after { display: none !important; } /* ================================================================ 3. HEADER — pinned at top ================================================================ */ .compass-chat-header { padding: 8px 12px; flex-shrink: 0; width: 100%; } /* Close button — only visible when expanded */ .compass-mobile-close { display: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); border: none; color: #fff; font-size: 14px; cursor: pointer; align-items: center; justify-content: center; padding: 0; line-height: 1; } .compass-mobile-expanded .compass-mobile-close { display: flex; } .compass-new-chat-btn { font-size: 12px; padding: 5px 10px; } .compass-chat-status { font-size: 11px; } /* ================================================================ 4. TAB BAR ================================================================ */ .compass-tab-bar { padding: 0 12px; flex-shrink: 0; width: 100%; } .compass-tab { padding: 8px 16px; font-size: 13px; } /* ================================================================ 5. WELCOME SECTION ================================================================ */ .compass-chat-welcome { padding: 16px 16px 8px; width: 100%; } .compass-chat-welcome h2 { font-size: 1.05rem; margin-bottom: 6px; } .compass-chat-welcome p { font-size: 0.8rem; line-height: 1.35; } /* ================================================================ 6. CAROUSEL ================================================================ */ .compass-carousel-slide { flex: 0 0 100%; padding: 0 6px; } .compass-suggestion-btn { padding: 16px 12px; font-size: 13px; min-height: 56px; } .compass-carousel-wrapper { gap: 4px; } .compass-carousel-nav { width: 22px; height: 22px; font-size: 14px; } .compass-carousel-dots { margin-top: 10px; gap: 6px; } /* ================================================================ 7. MESSAGES AREA — the only thing that scrolls ================================================================ */ .compass-chat-messages { padding: 10px; gap: 10px; flex: 1 1 0 !important; min-height: 0 !important; width: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Push messages to the bottom when they don't fill the area */ .compass-mobile-expanded .compass-chat-messages::before { content: ''; flex: 1; } .compass-message { max-width: 94%; word-break: break-word; } .compass-message-content { padding: 10px 12px; font-size: 13px; line-height: 1.45; word-break: break-word; overflow-wrap: break-word; } .compass-message-avatar { width: 26px; height: 26px; flex-shrink: 0; } .compass-avatar-icon { width: 26px; height: 26px; } /* ================================================================ 8. INPUT AREA — pinned at bottom ================================================================ */ .compass-chat-input-area { padding: 6px 8px; margin: 0 auto 6px; flex-shrink: 0; width: 100% !important; max-width: 100% !important; } .compass-chat-input-area textarea { padding: 10px 48px 32px 12px; font-size: 16px; /* Must be ≥ 16px or iOS Safari auto-zooms on focus */ min-height: 52px; max-height: 100px; border-radius: 8px; width: 100% !important; } #compass-send { bottom: 22px; right: 18px; width: 30px; height: 30px; font-size: 14px; } .compass-char-counter { bottom: 22px; right: 56px; font-size: 10px; } /* ================================================================ 9. SUGGESTIONS / OPTIONS ================================================================ */ .compass-option-btn { flex: 1 1 100%; text-align: center; padding: 10px; font-size: 13px; } /* ================================================================ 10. ROLEPLAY ================================================================ */ .compass-rp-panel, .compass-rp-config { margin: 0 6px 6px; padding: 12px 10px; } .compass-rp-messages { -webkit-overflow-scrolling: touch; } .compass-rp-message-user, .compass-rp-message-persona { max-width: 94%; } .compass-rp-difficulty-cards, .compass-rp-client-type-cards { flex-direction: column; } .compass-rp-actions { flex-direction: column; } .compass-rp-actions button { width: 100%; } .compass-rp-assessment .assessment-scores { grid-template-columns: 1fr; } .compass-rp-option-cards { flex-direction: column; } .compass-rp-input-area textarea { font-size: 16px; /* Must be ≥ 16px or iOS Safari auto-zooms on focus */ padding: 10px 48px 10px 12px; } .compass-rp-input-area button { right: 4px; bottom: 4px; width: 30px; height: 30px; font-size: 14px; } .compass-rp-input-area .compass-char-counter { right: 40px; font-size: 10px; } /* ================================================================ 11. PAGE ISOLATION When expanded, hide everything else on the page. ================================================================ */ body:has(.compass-mobile-expanded) { overflow: hidden !important; } body:has(.compass-mobile-expanded) > *:not(.lydia-compass-chat-container) { display: none !important; }