style(ui): improve bottom padding for safe area compatibility

update bottom padding on banners, status bars, and player controls to use
env(safe-area-inset-bottom) for better support on devices with display
cutouts or home indicators. also add viewportFit: cover to layout for
full-viewport rendering on mobile browsers.

src/app/(app)/epub/[id]/page.tsx

@@ -243,7 +243,7 @@ export default function EPUBPage() {
       )}
       {isAtLimit ? (
         <div className="sticky bottom-0 z-30 w-full border-t border-offbase bg-base" data-app-ttsbar>
-          <div className="px-2 md:px-3 pt-1 pb-1.5 flex items-center justify-center gap-1 min-h-10">
+          <div className="px-2 md:px-3 pt-1 pb-[max(0.375rem,env(safe-area-inset-bottom))] flex items-center justify-center gap-1 min-h-10">
             <RateLimitPauseButton />
             <RateLimitBanner />
           </div>

src/app/(app)/html/[id]/page.tsx

@@ -234,7 +234,7 @@ export default function HTMLPage() {
       )}
       {isAtLimit ? (
         <div className="sticky bottom-0 z-30 w-full border-t border-offbase bg-base" data-app-ttsbar>
-          <div className="px-2 md:px-3 pt-1 pb-1.5 flex items-center justify-center gap-1 min-h-10">
+          <div className="px-2 md:px-3 pt-1 pb-[max(0.375rem,env(safe-area-inset-bottom))] flex items-center justify-center gap-1 min-h-10">
             <RateLimitPauseButton />
             <RateLimitBanner />
           </div>

src/app/(app)/pdf/[id]/page.tsx

@@ -441,7 +441,7 @@ export default function PDFViewerPage() {
       )}
       {isAtLimit ? (
         <div className="sticky bottom-0 z-30 w-full border-t border-offbase bg-base" data-app-ttsbar>
-          <div className="px-2 md:px-3 pt-1 pb-1.5 flex items-center justify-center gap-1 min-h-10">
+          <div className="px-2 md:px-3 pt-1 pb-[max(0.375rem,env(safe-area-inset-bottom))] flex items-center justify-center gap-1 min-h-10">
             <RateLimitPauseButton />
             <RateLimitBanner />
           </div>

src/app/layout.tsx

@@ -1,6 +1,6 @@
 import "./globals.css";
 import { ReactNode } from "react";
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 import { Figtree } from "next/font/google";
 import { ConsentAwareAnalytics } from "@/components/ConsentAwareAnalytics";
 import { CookieConsentBanner } from "@/components/CookieConsentBanner";
@@ -30,6 +30,10 @@ const themeInitScript = `
 })();
 `;
 
+export const viewport: Viewport = {
+  viewportFit: "cover",
+};
+
 export const metadata: Metadata = {
   title: {
     default: "OpenReader",

src/components/CookieConsentBanner.tsx

@@ -41,7 +41,7 @@ export function CookieConsentBanner() {
       leave="transition ease-in duration-200 transform"
       leaveFrom="translate-y-0 opacity-100"
       leaveTo="translate-y-full opacity-0"
-      className="fixed bottom-0 left-0 right-0 z-[60] p-4 md:p-6"
+      className="fixed bottom-0 left-0 right-0 z-[60] px-4 pt-4 pb-[max(1rem,env(safe-area-inset-bottom))] md:px-6 md:pt-6 md:pb-[max(1.5rem,env(safe-area-inset-bottom))]"
     >
       <div className="mx-auto max-w-5xl rounded-xl border border-offbase bg-base p-5 shadow-2xl md:flex md:items-center md:justify-between md:gap-8">
         <div className="mb-4 md:mb-0">

src/components/doclist/window/FinderSidebar.tsx

@@ -354,7 +354,10 @@ export function FinderSidebar({
         </div>
       </div>
       {bottomSlot && (
-        <div className="shrink-0 border-t border-offbase p-2" onClick={(e) => e.stopPropagation()}>
+        <div
+          className="shrink-0 border-t border-offbase px-2 pt-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] md:pb-2"
+          onClick={(e) => e.stopPropagation()}
+        >
           {bottomSlot}
         </div>
       )}

src/components/doclist/window/FinderStatusBar.tsx

@@ -19,7 +19,7 @@ export function FinderStatusBar({
     <div
       role="status"
       aria-live="polite"
-      className="h-6 px-3 flex items-center justify-between gap-3 text-[11px] text-muted bg-base border-t border-offbase select-none"
+      className="min-h-6 px-3 pb-[env(safe-area-inset-bottom)] flex items-center justify-between gap-3 text-[11px] text-muted bg-base border-t border-offbase select-none"
     >
       <span className="truncate">{summary}</span>
       <span className="shrink-0">

src/components/player/TTSPlayer.tsx

@@ -32,7 +32,7 @@ export default function TTSPlayer({ currentPage, numPages }: {
 
   return (
     <div className="sticky bottom-0 z-30 w-full border-t border-offbase bg-base" data-app-ttsbar>
-      <div className="px-2 md:px-3 pt-1 pb-1.5 flex items-center justify-center gap-1 min-h-10">
+      <div className="px-2 md:px-3 pt-1 pb-[max(0.375rem,env(safe-area-inset-bottom))] flex items-center justify-center gap-1 min-h-10">
         {/* Speed control */}
         <SpeedControl 
           setSpeedAndRestart={setSpeedAndRestart}