/* assets/css/mobile.treeonly.css Mobile: hide login/list/controls; keep tree + person info panel. Driven by set in assets/js/mobile.treeonly.js */ html.is-mobile body{ overflow: hidden !important; } /* Hide UI blocks on mobile (keep tree + person info panel) */ html.is-mobile #title-banner, html.is-mobile #legend, html.is-mobile #controls, html.is-mobile #login, html.is-mobile #editModal, html.is-mobile #usersModal{ display: none !important; } /* Fullscreen tree */ html.is-mobile #tree-container{ position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; z-index: 1 !important; } /* Critical: allow touch pan/zoom to work without browser scroll */ html.is-mobile #tree-svg{ width: 100% !important; height: 100% !important; touch-action: none !important; } /* Person info panel as bottom sheet (only when visible) */ html.is-mobile #panel:not(.hidden){ position: fixed !important; left: 12px !important; right: 12px !important; bottom: 12px !important; max-height: 45vh !important; overflow: auto !important; z-index: 9998 !important; border-radius: 18px !important; border: 1px solid rgba(255,255,255,.16) !important; background: rgba(17, 24, 39, .78) !important; box-shadow: 0 20px 70px rgba(0,0,0,.55) !important; backdrop-filter: blur(10px); } html.is-mobile #panel .panel-head{ position: sticky; top: 0; background: rgba(17, 24, 39, .85); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.10); } html.is-mobile #panel .panel-actions{ position: sticky; bottom: 0; background: rgba(17, 24, 39, .85); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.10); padding-bottom: 8px; } /* Floating Center button — small circular, icon centered */ html.is-mobile .tree-fab{ position: fixed; left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); opacity: .78; z-index: 9999; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: radial-gradient(70% 70% at 30% 20%, rgba(34,211,238,.22), transparent 55%), linear-gradient(180deg, rgba(17,24,39,.62), rgba(17,24,39,.42)); box-shadow: 0 16px 50px rgba(0,0,0,.45); display: grid; place-items: center; backdrop-filter: blur(10px); -webkit-tap-highlight-color: transparent; } html.is-mobile .tree-fab svg{ width: 22px; height: 22px; opacity: .98; } html.is-mobile .tree-fab:active{ transform: translateY(1px); }