fix: add safari webkit support and mobile safe area adjustments

public/css/main.css

@@ -862,6 +862,13 @@ video::cue {
   pointer-events: none;
 }
 
+/* iOS safe area for now playing overlay */
+@supports (bottom: env(safe-area-inset-bottom)) {
+  .now-playing-overlay {
+    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
+  }
+}
+
 /* Fullscreen mode for video container */
 .video-container:fullscreen {
   width: 100%;
@@ -879,6 +886,34 @@ video::cue {
   bottom: 80px;
 }
 
+/* Safari fullscreen support (required for iOS) */
+.video-container:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+  background: #000;
+}
+
+.video-container:-webkit-full-screen #video-player {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.video-container:-webkit-full-screen .now-playing-overlay {
+  bottom: 80px;
+}
+
+/* Fullscreen safe area for controls - especially for iOS */
+.video-container:fullscreen .watch-bottom-bar,
+.video-container:-webkit-full-screen .watch-bottom-bar {
+  padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
+}
+
+.video-container:fullscreen .watch-top-bar,
+.video-container:-webkit-full-screen .watch-top-bar {
+  padding-top: calc(var(--space-lg) + env(safe-area-inset-top, 0px));
+}
+
 .channel-nav {
   display: flex;
   flex-direction: column;
@@ -3333,6 +3368,14 @@ kbd {
   pointer-events: none;
 }
 
+/* iOS safe area support for landscape mode (notched devices) */
+@supports (padding: env(safe-area-inset-left)) {
+  .watch-overlay {
+    padding-left: env(safe-area-inset-left, 0px);
+    padding-right: env(safe-area-inset-right, 0px);
+  }
+}
+
 /* Top Bar */
 .watch-top-bar {
   display: flex;
@@ -4026,6 +4069,15 @@ kbd {
   .next-info h4 {
     max-width: none;
   }
+
+  /* iOS Safari safe area adjustments for mobile */
+  .watch-next-episode {
+    bottom: calc(100px + env(safe-area-inset-bottom, 0px));
+  }
+
+  .watch-bottom-bar {
+    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
+  }
 }
 
 /* Player Overflow Menu */