/* ================================================================ Loki Talk · glass-mobile.css · v glass-mob-1 Mobile + iOS polish layer. Loaded AFTER glass-overlay.css to win specificity. Addresses the P0 from baseline LLM-review: - welcome and login on iPhone 15 (Safari) rendered as empty aurora background because the auth card was clipped behind the safe-area / dynamic toolbar. Scope: - safe-area insets on root containers - touch-friendly hit targets (44px minimum on mobile) - bottom toolbar safe spacing - keyboard-aware composer (svh / dvh) ================================================================ */ /* Palette aliases — bridge between palette-aware tokens (--g-*) and shorter palette-namespaced names used by glass-mobile / glass-bubbles / glass-palette-picker. They re-export current palette accents so a single source of truth (glass-tokens.css) keeps driving everything. */ :root { --p-text: var(--g-text, #f5f3ff); --p-muted: var(--g-text-muted, rgba(245,243,255,0.72)); --p-dim: var(--g-text-dim, rgba(245,243,255,0.48)); --p-accent: var(--g-accent, #7c5cff); --p-accent-2: var(--g-accent-2, #00d4ff); --p-accent-3: var(--g-accent-3, #ff5cd6); --p-accent-glow: rgba(124, 92, 255, 0.42); /* Bubble + pin tokens for the new layer files — neutral fallback if the active palette doesn't override. */ --g-pin-accent: #ffc45c; --g-bubble-bg: transparent; --g-bubble-hover: rgba(255, 255, 255, 0.045); } /* Per-palette glow override so :focus rings and ticks look native to the active aurora. Magenta sunset glows hot, mint glows cool. */ [data-loki-palette="aurora-violet"] { --p-accent-glow: rgba(124, 92, 255, 0.42); } [data-loki-palette="aurora-mint"] { --p-accent-glow: rgba( 52,211,153, 0.42); } [data-loki-palette="sunset-magenta"] { --p-accent-glow: rgba(255, 92,214, 0.45); } [data-loki-palette="mono-graphite"] { --p-accent-glow: rgba(207,209,214, 0.30); } /* iOS Safari (and Android Chrome) need explicit safe-area insets when meta viewport-fit=cover is used. We apply them on the auth flow and the room view so content never hides behind the notch / home bar. */ @supports (padding: max(0px)) { /* Root containers — give them inset padding so background still bleeds to edges (aurora) but interactive content stays above the fold. */ body.glass #matrixchat, body.glass .mx_MatrixChat_wrapper, body.glass .mx_MatrixChat, body.glass .mx_HomePage, body.glass .mx_HomePage_default { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); box-sizing: border-box; } /* Auth page / Welcome flow — this is where the iPhone 15 baseline review found the card was completely off-screen. We push the card down past the dynamic island and up above the home indicator. */ body.glass .mx_AuthPage, body.glass .mx_AuthPage_modal, body.glass .mx_Welcome { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); box-sizing: border-box; /* Use small viewport units so the card never goes behind the address bar that iOS hides/shows. svh/dvh fall back to vh in older browsers. */ min-height: 100vh; min-height: 100svh; } /* RoomView composer — bottom inset so the send button isn't behind iPhone's home indicator. */ body.glass .mx_MessageComposer, body.glass .mx_LegacyCallView, body.glass .mx_HomePage_default_buttons { padding-bottom: max(8px, env(safe-area-inset-bottom)); } /* RoomList sidebar — left inset for landscape iOS where notch eats it. */ body.glass .mx_LeftPanel, body.glass .mx_SpacePanel { padding-left: max(0px, env(safe-area-inset-left)); } } /* ===== Mobile-only refinements (≤ 768px) ===== */ @media (max-width: 768px) { /* Make sure the auth card itself is visible and centered on small screens. glass-overlay sets visual styling; here we own layout. */ body.glass .mx_AuthPage_modal { width: min(94vw, 480px) !important; margin: 0 auto !important; /* Glass card surface for the auth flow — was missing per baseline review */ background: var(--g-surface-2, rgba(20, 22, 38, 0.62)) !important; backdrop-filter: var(--g-blur, blur(28px) saturate(170%)); -webkit-backdrop-filter: var(--g-blur, blur(28px) saturate(170%)); border: 1px solid var(--g-edge, rgba(255, 255, 255, 0.16)) !important; border-radius: var(--g-r-lg, 22px) !important; box-shadow: var(--g-shadow-lg, 0 24px 60px rgba(0, 0, 0, 0.55)) !important; overflow: hidden; } /* Bigger tap targets on mobile (Apple HIG = 44pt minimum). */ body.glass .mx_AccessibleButton, body.glass [role="button"]:not(.mx_EventTile_line):not(.mx_EventTile_bubble) { min-height: 44px; } /* Form fields are easier to tap when comfortably tall. */ body.glass .mx_AuthBody .mx_Field input, body.glass .mx_AuthBody .mx_Field select { min-height: 48px; font-size: 16px; /* prevents iOS zoom-on-focus */ } /* Submit buttons on auth screens — full width feels native on phones. */ body.glass .mx_AuthBody .mx_Login_submit, body.glass .mx_AuthBody input[type="submit"], body.glass .mx_AuthBody button[type="submit"] { width: 100% !important; min-height: 48px; } } /* ===== Phone landscape — keep auth card centered ===== */ @media (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) { body.glass .mx_AuthPage, body.glass .mx_Welcome { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); } body.glass .mx_AuthPage_modal { margin-top: 0 !important; margin-bottom: 0 !important; } } /* ===== Unified focus ring (improves keyboard a11y, baseline P1) ===== */ body.glass .mx_Field input:focus, body.glass .mx_Field select:focus, body.glass .mx_Field textarea:focus, body.glass .mx_Field_input:focus-within { outline: none; border-color: var(--p-accent, var(--g-accent-1, #7c5cff)) !important; box-shadow: 0 0 0 3px var(--p-accent-glow, rgba(124, 92, 255, 0.28)), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; transition: box-shadow 160ms var(--g-ease-out, ease-out), border-color 160ms var(--g-ease-out, ease-out); } /* ===== Stronger primary CTA glow (baseline P1) ===== */ body.glass .mx_AccessibleButton.mx_AccessibleButton_kind_primary, body.glass .mx_Login_submit, body.glass .mx_AuthBody button[type="submit"] { background: linear-gradient(135deg, var(--p-accent, #7c5cff) 0%, var(--p-accent-2, #5cd9ff) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: 0 8px 24px var(--p-accent-glow, rgba(124, 92, 255, 0.40)), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; color: #fff !important; font-weight: 600; letter-spacing: 0.2px; transition: transform 120ms var(--g-ease-out, ease-out), box-shadow 200ms var(--g-ease-out, ease-out), filter 160ms var(--g-ease-out, ease-out); } body.glass .mx_AccessibleButton.mx_AccessibleButton_kind_primary:hover, body.glass .mx_Login_submit:hover, body.glass .mx_AuthBody button[type="submit"]:hover { filter: brightness(1.07); box-shadow: 0 12px 32px var(--p-accent-glow, rgba(124, 92, 255, 0.55)), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important; transform: translateY(-1px); } body.glass .mx_AccessibleButton.mx_AccessibleButton_kind_primary:active, body.glass .mx_Login_submit:active, body.glass .mx_AuthBody button[type="submit"]:active { transform: translateY(0); filter: brightness(0.96); } /* ===== Reduced motion respect ===== */ @media (prefers-reduced-motion: reduce) { body.glass .mx_AccessibleButton.mx_AccessibleButton_kind_primary, body.glass .mx_Login_submit, body.glass .mx_AuthBody button[type="submit"], body.glass .mx_Field input:focus { transition: none !important; } }