/* ══════════════════════════════════════════════════════════════════ SyannuAI Mobile Experience — mobile.css Loaded LAST after style.css and design-v4.css. Contains only responsive/mobile overrides — no desktop changes. ══════════════════════════════════════════════════════════════════ */ /* ── Safe-area custom properties ── */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* ══════════════════════════════════════════════════════════════════ 1. HAMBURGER MENU + MOBILE NAV ══════════════════════════════════════════════════════════════════ */ /* Backdrop overlay — injected by JS into */ .mobile-nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 997; /* below nav panel (1000) */ opacity: 0; transition: opacity 0.28s ease; touch-action: none; -webkit-tap-highlight-color: transparent; } .mobile-nav-backdrop.active { display: block; opacity: 1; } /* Body scroll lock when nav is open */ body.nav-open { overflow: hidden; position: fixed; /* prevents iOS rubber-band scroll bleed */ width: 100%; } @media (max-width: 900px) { /* Larger, AA-compliant tap target for the toggle button */ .nav-mobile-toggle { width: 44px; height: 44px; min-width: 44px; border-radius: 10px; } /* Nav panel: respect safe areas + overscroll. transition !important overrides the inline "transition:opacity 0.18s" from base.html so the transform slide animation actually fires on mobile. */ .header-right { padding-top: max(70px, calc(58px + var(--safe-top))) !important; padding-left: max(24px, calc(16px + var(--safe-left))) !important; padding-right: max(24px, calc(16px + var(--safe-right))) !important; padding-bottom: max(40px, calc(24px + var(--safe-bottom))) !important; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Override inline transition so transform slide works */ transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; /* Raise above backdrop-filter stacking context (WebKit quirk) */ z-index: 1001 !important; } /* Ensure slide-in overrides any stale inline transform */ .header-right.mobile-open { transform: translateX(0) !important; pointer-events: auto !important; } /* Nav link items: full-width, min 48px tap target */ .header-right .nav-link, .header-right button.nav-link { min-height: 48px !important; font-size: 15px !important; padding: 12px 16px !important; display: flex !important; align-items: center !important; border-radius: 10px !important; border-bottom: none !important; width: 100% !important; gap: 10px !important; } .header-right .nav-link:active { background: rgba(124, 58, 237, 0.12) !important; } /* Divider: full-width horizontal rule on mobile */ .header-right .nav-divider { width: 100%; height: 1px; margin: 6px 0; } /* Avatar link: full-width row */ .header-right .nav-avatar-link { max-width: 100% !important; min-height: 56px !important; gap: 12px !important; } .header-right .nav-username { max-width: none !important; font-size: 14px !important; } /* Settings button: flush left */ .header-right .nav-settings-btn { width: 100% !important; justify-content: flex-start !important; gap: 10px !important; } /* Auth buttons inside nav panel */ .header-right .btn { height: 44px !important; font-size: 14px !important; margin-top: 8px !important; } } /* Quick panel from auth.js: constrain to viewport on mobile */ @media (max-width: 600px) { .nav-quick-panel { left: 12px !important; right: 12px !important; width: auto !important; max-width: calc(100vw - 24px) !important; max-height: 55vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } .nqp-row { min-height: 44px; } } /* Settings modal from auth.js: full screen on small phones */ @media (max-width: 600px) { #navSettingsModal > div { width: 100vw !important; height: 100dvh !important; height: 100vh !important; /* fallback */ max-width: 100% !important; border-radius: 0 !important; } } /* ══════════════════════════════════════════════════════════════════ 2. CHAT PAGE — COMPLETE MOBILE REDESIGN ══════════════════════════════════════════════════════════════════ */ /* Sessions drawer toggle: desktop hidden, mobile shown */ .mobile-sessions-toggle { display: none !important; } /* Sessions backdrop (sits behind the drawer) */ .chat-sessions-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 199; opacity: 0; transition: opacity 0.28s ease; touch-action: none; } .chat-sessions-backdrop.active { display: block; opacity: 1; } /* Close button inside sessions panel — hidden on desktop */ .sessions-mobile-close { display: none; background: var(--bg-elevated); border: 1px solid var(--border-medium); border-radius: 8px; color: var(--text-secondary); cursor: pointer; padding: 6px; line-height: 0; flex-shrink: 0; transition: background var(--t-fast), color var(--t-fast); } .sessions-mobile-close:hover { background: var(--bg-hover); color: var(--text-primary); } @media (max-width: 768px) { /* ── Chat layout: true full-screen column ── */ .chat-layout { flex-direction: column !important; /* dvh = dynamic viewport height, shrinks when virtual keyboard appears */ height: calc(100dvh - 58px) !important; height: calc(100vh - 58px) !important; /* fallback */ overflow: hidden !important; } /* ── Sessions panel → left-side drawer overlay ── */ .chat-sessions { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: min(280px, 88vw) !important; height: 100dvh !important; height: 100vh !important; /* fallback */ z-index: 200 !important; transform: translateX(-100%) !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; border-right: 1px solid var(--border-medium) !important; border-bottom: none !important; flex-direction: column !important; overflow: hidden !important; padding-top: max(16px, var(--safe-top)) !important; padding-bottom: max(16px, var(--safe-bottom)) !important; } .chat-sessions.mobile-open { transform: translateX(0) !important; } .chat-sessions-backdrop.active { display: block; } .sessions-mobile-close { display: flex; } /* Sessions header: add close button via flex layout */ .chat-sessions-header { position: relative; padding-top: max(16px, calc(10px + var(--safe-top))) !important; } /* Session list: vertical scroll (not horizontal strip) */ .session-list { display: flex !important; flex-direction: column !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 8px !important; gap: 4px !important; flex: 1 !important; -webkit-overflow-scrolling: touch !important; } .session-item { white-space: normal !important; flex-shrink: 0 !important; width: 100% !important; } /* Bigger tap target for session items */ .session-item > div:first-child { min-height: 44px; display: flex; align-items: center; } /* ── Mobile sessions toggle shows in topbar ── */ .mobile-sessions-toggle { display: inline-flex !important; } /* ── Chat main: full width, flex column ── */ .chat-main { flex: 1 !important; min-height: 0 !important; width: 100% !important; } /* ── Chat topbar: tighter, compact ── */ .chat-topbar { padding: 10px 12px !important; gap: 8px !important; } .chat-topbar-left { gap: 8px !important; min-width: 0 !important; flex: 1 !important; overflow: hidden !important; } .chat-topbar-title { font-size: 13px !important; max-width: 130px !important; } /* ── Agent mode switcher: horizontal scroll strip ── */ .chat-topbar-right { gap: 4px !important; } #agentModeSwitcher { overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; max-width: 185px !important; flex-shrink: 1 !important; } #agentModeSwitcher::-webkit-scrollbar { display: none; } .agent-sw-btn { flex-shrink: 0 !important; padding: 5px 9px !important; font-size: 11px !important; white-space: nowrap !important; } /* ── Messages: proper height, touch scroll ── */ .chat-messages { flex: 1 !important; min-height: 0 !important; overflow-y: auto !important; padding: 16px 12px !important; gap: 14px !important; -webkit-overflow-scrolling: touch !important; } /* ── Message bubbles: comfortable reading ── */ .chat-msg { gap: 8px !important; } .chat-msg-avatar { width: 28px !important; height: 28px !important; font-size: 15px !important; } .chat-msg-bubble { font-size: 13px !important; line-height: 1.6 !important; padding: 10px 12px !important; } /* Welcome screen: 2-col grid → single column */ .chat-msg.assistant .chat-msg-bubble > div[style*="grid-template-columns"] { display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; } /* Quick-prompt chips: tighter wrap */ .chat-msg.assistant .chat-msg-bubble > div[style*="flex-wrap"] { gap: 4px !important; } /* ── Input composer: sticky at bottom, safe-area aware ── */ .chat-input-area { padding: 10px 12px !important; padding-bottom: max(10px, calc(6px + var(--safe-bottom))) !important; } .chat-input-row { padding: 8px 10px 8px 14px !important; border-radius: 16px !important; } /* iOS prevents auto-zoom on inputs ≥16px */ .chat-input-row textarea { font-size: 16px !important; min-height: 22px !important; max-height: 100px !important; line-height: 1.5 !important; } #sendBtn { height: 38px !important; padding: 0 12px !important; min-width: 62px !important; flex-shrink: 0 !important; } /* Disclaimer: compact */ .ai-disclaimer-bar { font-size: 9.5px !important; padding: 4px 0 !important; } /* Settings side panel: hidden on mobile (no room) */ .chat-settings { display: none !important; } } @media (max-width: 480px) { /* Very narrow phones: hide agent-mode text labels, show dots only */ .agent-sw-btn span:not(.agent-sw-dot) { display: none !important; } .agent-sw-btn { padding: 6px 10px !important; min-width: 30px !important; justify-content: center !important; } #agentModeSwitcher { max-width: 140px !important; } .chat-topbar-title { max-width: 90px !important; } .chat-messages { padding: 12px 8px !important; } .chat-input-area { padding: 8px !important; padding-bottom: max(8px, calc(4px + var(--safe-bottom))) !important; } } /* ══════════════════════════════════════════════════════════════════ 3. DASHBOARD — TABLE & CONTROLS ══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Table: horizontal scroll; show only key columns */ .table-scroll, .history-table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } /* * Visible on mobile: [1]=star icon, [2]=Symbol, [3]=LTP, [4]=Change, * [5]=Chg%, [last]=remove icon. Hide columns 6–13 (Open-Updated). */ .table-scroll table th:nth-child(n+6):not(:last-child), .table-scroll table td:nth-child(n+6):not(:last-child) { display: none !important; } .table-scroll table th, .table-scroll table td { white-space: nowrap; font-size: 12.5px; padding: 10px 10px !important; } /* Subscribe bar: stack vertically */ .subscribe-bar-v4 { flex-direction: column !important; gap: 8px !important; align-items: stretch !important; } .subscribe-bar-v4 .sub-input-group { flex-direction: column !important; width: 100% !important; min-width: unset !important; gap: 8px !important; } .subscribe-bar-v4 .sub-input-group > div { width: 100% !important; max-width: 100% !important; } #subscribeGroup { width: 100%; display: flex !important; gap: 8px !important; } #subscribeInput { flex: 1 !important; width: 0 !important; /* let flex grow */ min-width: 0 !important; } /* Filter tabs: allow wrapping */ .filter-tabs { flex-wrap: wrap; } } /* ══════════════════════════════════════════════════════════════════ 4. GLOBAL MOBILE POLISH ══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── Touch targets: WCAG 2.5.5 / Apple HIG 44×44 minimum ── */ .btn:not(.btn-xs) { min-height: 40px; } .btn-sm { min-height: 36px; } .btn-lg, .btn-xl { min-height: 48px; } select { min-height: 40px; } /* ── iOS auto-zoom prevention: inputs must be ≥16px ── */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea { font-size: max(16px, 1em) !important; } /* ── Toast: respect safe areas and screen edges ── */ .toast-container { bottom: max(20px, calc(12px + var(--safe-bottom))); right: max(12px, calc(8px + var(--safe-right))); left: max(12px, calc(8px + var(--safe-left))); } .toast { max-width: 100%; min-width: 180px; } /* ── Modal box: full-width on mobile ── */ .modal-box { width: calc(100vw - 32px) !important; max-width: 100% !important; } /* ── Footer: single column ── */ .site-footer { margin-top: 40px; } .footer-inner { grid-template-columns: 1fr !important; gap: 20px !important; } .footer-links { justify-content: flex-start !important; } /* ── Reduce motion for heavy animations ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ── Prevent horizontal bleed ── */ .landing, main { overflow-x: hidden; } /* ── Header: account for device notch ── */ .header-inner { padding-left: max(20px, calc(12px + var(--safe-left))); padding-right: max(20px, calc(12px + var(--safe-right))); } /* ── Hover effects that use transform: disable for perf/UX ── */ .about-card:hover, .team-card:hover, .bento-card:hover, .footer-btn:hover { transform: none !important; } } @media (max-width: 480px) { /* ── Tighter page padding ── */ .static-page { padding: 32px 16px 80px !important; } /* ── Auth card: compact ── */ .auth-card-v4 { padding: 24px 18px !important; } /* ── Stat cards: 2 columns on very small screens ── */ .stat-cards-v4 { grid-template-columns: 1fr 1fr !important; } }