Fix viewport height handling and safe-area layout styles

[tracygardner]

Motivation

• Ensure correct viewport sizing on mobile (especially iOS) by using visualViewport when available and avoid layout breakage caused by 100vh quirks.
• Provide safe-area insets support for devices using viewport-fit=cover so UI chrome does not overlap content.

Description

• Replaced the adjustViewport block in main/view.js to use window.visualViewport?.height and set both --vh and --app-height, and added load, resize, orientationchange, and visualViewport.resize listeners.
• Added a :root CSS block near the top of style.css defining --vh, --app-height, and --menu-height defaults.
• Replaced the html, body sizing rule to use calc(var(--vh, 1vh) * 100) fallback and modern 100dvh, and added env(safe-area-inset-*) paddings to body for safe-area support.
• Rewrote core layout height rules for #maincontent, #codePanel, #rightArea and mobile variants to use --app-height/--vh fallbacks and updated #bottomBar to include safe-area-aware bottom padding; removed legacy height: 100vh and calc(100vh - ...) usages to avoid conflicts.

Testing

• Ran pattern checks with rg -n "adjustViewport|100vh|calc\(100vh" main/view.js style.css to verify the new adjustViewport code and removal/replacement of direct 100vh usages, and the checks returned the expected updated locations.
• Inspected the modified files with sed/file dumps to confirm the exact replacement blocks are present in main/view.js and style.css.
• Verified repository state with git status --short and created a commit (commit succeeded).

---

Codex Task