/* ============================================================= chat-mobile.css — Mobile UX v2 Overhaul Guard: All rules require .mobile-ux-v2 on Flag OFF → 0 impact. Flag ON → mobile UX improvements. Deploy: localStorage.setItem('le_mobile_ux_v2', '1') ============================================================= */ /* ── Faz 1: Flexbox Layout Chain ────────────────────────────── */ /* Replaces fragile calc(100vh - Npx) magic numbers with a full flexbox chain: body → shell → frame → frame-inner → chat-container → chat-main. Input bar can NEVER be pushed off-screen. Each container fills its parent, min-height:0 allows shrinking. */ @media (max-width: 960px) { /* Lock body to dynamic viewport height */ html[data-theme="v2"] .mobile-ux-v2 { height: 100vh !important; height: 100dvh !important; min-height: 0 !important; max-height: 100vh !important; max-height: 100dvh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } /* width:100% critical — .shell has margin:0 auto which prevents flex stretch in a column parent. Without explicit width, shell collapses to content-width → narrow column on tablets. */ html[data-theme="v2"] .mobile-ux-v2 .shell { width: 100% !important; max-width: none !important; flex: 1 1 0% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } html[data-theme="v2"] .mobile-ux-v2 .frame { width: 100% !important; flex: 1 1 0% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } html[data-theme="v2"] .mobile-ux-v2 .frame-inner { width: 100% !important; flex: 1 1 0% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* Nav: fixed height, never shrinks */ html[data-theme="v2"] .mobile-ux-v2 .nav { flex-shrink: 0 !important; } /* Chat container: fills remaining space after nav */ html[data-theme="v2"] .mobile-ux-v2 .chat-container { flex: 1 1 0% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; } /* Chat main: fills container, internal flex column */ html[data-theme="v2"] .mobile-ux-v2 .chat-main { height: auto !important; min-height: 0 !important; max-height: none !important; flex: 1 1 0% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* Chat header: fixed height, stays at top */ html[data-theme="v2"] .mobile-ux-v2 .chat-header { flex-shrink: 0 !important; } /* Messages/Welcome: fills remaining space, scrolls internally */ html[data-theme="v2"] .mobile-ux-v2 .chat-messages, html[data-theme="v2"] .mobile-ux-v2 .chat-welcome { flex: 1 1 0% !important; min-height: 0 !important; overflow-y: auto !important; } /* Input area: pinned to bottom, NEVER shrinks or gets pushed */ html[data-theme="v2"] .mobile-ux-v2 .chat-input-area { flex-shrink: 0 !important; } } /* ── Faz 2: Input Bar ────────────────────────────────────────── */ /* iOS Safari: Web Speech API exists in window but fails silently. Native keyboard dictation (🎤 key) is the correct input method. -webkit-touch-callout is WebKit/Safari-only → Android unaffected. */ @supports (-webkit-touch-callout: none) { html[data-theme="v2"] .mobile-ux-v2 .btn-mic { display: none !important; } } /* Hides .smart-text and .smart-badge on mobile. ~130px → ~44px. Textarea gains ~86px width. */ @media (max-width: 768px) { html[data-theme="v2"] .mobile-ux-v2 .btn-smart .smart-text, html[data-theme="v2"] .mobile-ux-v2 .btn-smart .smart-badge { display: none !important; } html[data-theme="v2"] .mobile-ux-v2 .btn-smart { padding: 10px !important; min-width: 44px !important; justify-content: center !important; } } /* Narrow screens (Z Fold 5 @ 344px, etc.): tighter gaps */ @media (max-width: 400px) { html[data-theme="v2"] .mobile-ux-v2 .input-row { gap: 6px !important; } html[data-theme="v2"] .mobile-ux-v2 .btn-smart { padding: 8px !important; min-width: 40px !important; } html[data-theme="v2"] .mobile-ux-v2 .btn-send { width: 40px !important; height: 40px !important; min-width: 40px !important; } } /* ── Faz 3: Hamburger Consolidation ──────────────────────────── */ /* Replaces floating sidebar ☰ with in-header ☰. Nav ☰ (site navigation) stays untouched. Chat header ☰ (conversation list) replaces floating toggle. */ .chat-header-menu { display: none; width: 36px; height: 36px; border-radius: 8px; border: none; background: transparent; color: var(--text-soft, #9ca3af); cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, color 0.15s; margin-right: 8px; } .chat-header-menu:hover { background: rgba(99, 102, 241, 0.15); color: var(--accent, #6366f1); } @media (max-width: 960px) { .mobile-ux-v2 .chat-header-menu { display: flex !important; } html[data-theme="v2"] .mobile-ux-v2 .mobile-menu-toggle { display: none !important; } } /* ── Faz 4: Settings Bottom Sheet ────────────────────────────── */ /* On mobile (<768px): settings panel slides up from bottom. On desktop: unchanged (absolute dropdown). Swipe-to-dismiss intentionally omitted (scroll conflict). */ @media (max-width: 768px) { html[data-theme="v2"] .mobile-ux-v2 .settings-panel { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; margin-bottom: 0 !important; min-width: 100% !important; max-width: 100% !important; max-height: 70vh !important; border-radius: 20px 20px 0 0 !important; transform: translateY(100%); display: block !important; visibility: hidden; z-index: 10001 !important; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; /* Closed: transform animates, then visibility hides after 300ms */ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s !important; } html[data-theme="v2"] .mobile-ux-v2 .settings-panel.open { transform: translateY(0) !important; visibility: visible; /* Open: visibility instant, transform animates */ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s !important; } /* Drag handle — visual cue only, not functional */ html[data-theme="v2"] .mobile-ux-v2 .settings-panel::before { content: ''; display: block; width: 36px; height: 4px; background: rgba(148, 163, 184, 0.4); border-radius: 2px; margin: 0 auto 12px; } } /* Settings overlay — matches sidebar overlay style (rgba 0.6 + blur) */ .mobile-ux-v2 .settings-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 10000; backdrop-filter: blur(2px); } .mobile-ux-v2 .settings-overlay.open { display: block !important; }