src/components/playground/PhoneSimulator.tsx

@@ -84,41 +84,30 @@ export function PhoneSimulator({
   const [isDragging, setIsDragging] = useState(false);
   const dragOffset = useRef({ x: 0, y: 0 });
 
-  const handleDragStart = (e: React.MouseEvent | React.TouchEvent) => {
+  const handleDragStart = (e: React.MouseEvent) => {
-    e.preventDefault();
     setIsDragging(true);
-    const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
-    const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
     dragOffset.current = {
-      x: clientX - visualizerPosition.x,
+      x: e.clientX - visualizerPosition.x,
-      y: clientY - visualizerPosition.y,
+      y: e.clientY - visualizerPosition.y,
     };
   };
 
-  const handleDragMove = (e: MouseEvent | TouchEvent) => {
+  const handleDragMove = (e: MouseEvent) => {
     if (!isDragging || !phoneContainerRef.current || !visualizerRef.current) return;
 
-    e.preventDefault();
-
     const containerRect = phoneContainerRef.current.getBoundingClientRect();
     const visualizerRect = visualizerRef.current.getBoundingClientRect();
 
-    const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+    let newX = e.clientX - dragOffset.current.x;
-    const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+    let newY = e.clientY - dragOffset.current.y;
-
-    let newX = clientX - dragOffset.current.x;
-    let newY = clientY - dragOffset.current.y;
 
     // Constrain within container
     const maxX = containerRect.width - visualizerRect.width;
     const maxY = containerRect.height - visualizerRect.height;
-    // On mobile (width < 768px), status bar is hidden, so allow dragging to top (y=0)
+    const statusBarHeight = 48; // h-12 = 48px
-    // On desktop, keep status bar height constraint (48px)
-    const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
-    const minY = isMobile ? 0 : 48; // statusBarHeight = 48px
 
     newX = Math.max(0, Math.min(newX, maxX));
-    newY = Math.max(minY, Math.min(newY, maxY));
+    newY = Math.max(statusBarHeight, Math.min(newY, maxY));
 
     setVisualizerPosition({
       x: newX,
@@ -134,14 +123,10 @@ export function PhoneSimulator({
     if (isDragging) {
       window.addEventListener("mouseup", handleDragEnd);
       window.addEventListener("mousemove", handleDragMove);
-      window.addEventListener("touchend", handleDragEnd);
-      window.addEventListener("touchmove", handleDragMove, { passive: false });
     }
     return () => {
       window.removeEventListener("mouseup", handleDragEnd);
       window.removeEventListener("mousemove", handleDragMove);
-      window.removeEventListener("touchend", handleDragEnd);
-      window.removeEventListener("touchmove", handleDragMove);
     };
   }, [isDragging]);
 
@@ -807,7 +792,7 @@ export function PhoneSimulator({
   })();
 
   return (
-    <div className="absolute inset-0 w-full h-full bg-black rounded-none border-0 overflow-hidden flex flex-col shrink-0 md:relative md:w-auto md:max-w-full md:h-full md:aspect-[9/19.5] md:max-h-full md:rounded-[40px] md:border-[12px] md:border-gray-900 md:shadow-2xl">
+    <div className="w-auto max-w-full h-full aspect-[9/19.5] max-h-full bg-black rounded-[40px] border-[12px] border-gray-900 overflow-hidden relative shadow-2xl flex flex-col shrink-0">
       <style jsx global>{`
         .mirror-video video {
             transform: scaleX(-1);
@@ -839,12 +824,7 @@ export function PhoneSimulator({
         }
       `}</style>
       {/* Status Bar */}
-      <div className="hidden md:flex w-full bg-black/20 backdrop-blur-sm absolute top-0 left-0 z-50 items-center justify-between px-6 text-white text-xs font-medium"
+      <div className="h-12 w-full bg-black/20 backdrop-blur-sm absolute top-0 left-0 z-50 flex items-center justify-between px-6 text-white text-xs font-medium">
-           style={{
-             paddingTop: 'max(env(safe-area-inset-top, 0px), 0.5rem)',
-             paddingBottom: '0.75rem',
-             minHeight: '3rem',
-           }}>
         <span>{currentTime}</span>
         <div className="flex items-center gap-2">
           <WifiIcon className="w-4 h-4" />
@@ -853,10 +833,7 @@ export function PhoneSimulator({
       </div>
 
       {/* Main Content */}
-      <div ref={phoneContainerRef} className="flex-grow relative bg-gray-950 w-full h-full overflow-hidden"
+      <div ref={phoneContainerRef} className="flex-grow relative bg-gray-950 w-full h-full overflow-hidden">
-           style={{
-             paddingBottom: 'env(safe-area-inset-bottom, 0px)',
-           }}>
         <div className={`h-full w-full transition-all duration-500 ease-in-out transform ${
             phoneMode === "hand_off" && roomState === ConnectionState.Connected 
                 ? "blur-md scale-105" 
@@ -983,13 +960,12 @@ export function PhoneSimulator({
       {roomState === ConnectionState.Connected && voiceAssistant.audioTrack && phoneMode !== "hand_off" && (
           <div
             ref={visualizerRef}
-            className="absolute z-50 p-2 bg-black/40 backdrop-blur-md rounded-lg border border-white/10 shadow-lg cursor-move select-none touch-none"
+            className="absolute z-50 p-2 bg-black/40 backdrop-blur-md rounded-lg border border-white/10 shadow-lg cursor-move select-none"
             style={{
               left: visualizerPosition.x,
               top: visualizerPosition.y,
             }}
             onMouseDown={handleDragStart}
-            onTouchStart={handleDragStart}
           >
             <div className="h-8 w-24 flex items-center justify-center [--lk-va-bar-width:3px] [--lk-va-bar-gap:2px] [--lk-fg:white]">
               <BarVisualizer
@@ -1005,10 +981,7 @@ export function PhoneSimulator({
       {/* Call Controls Overlay */}
       {roomState === ConnectionState.Connected && (
           phoneMode === "capture" ? (
-            <div className="absolute top-0 left-0 w-full h-full flex flex-col justify-end px-[8%] z-40"
+            <div className="absolute top-0 left-0 w-full h-full flex flex-col justify-end pb-[5%] px-[8%] z-40">
-                 style={{
-                   paddingBottom: 'calc(5% + env(safe-area-inset-bottom, 0px))',
-                 }}>
               {/* Camera Controls Row */}
               <div className="w-full flex items-center justify-evenly mb-8">
                   {/* Left: Upload */}
@@ -1085,11 +1058,7 @@ export function PhoneSimulator({
               </div>
             </div>
           ) : (
-            <div className="absolute bottom-[5%] left-0 w-full px-[8%] z-40"
+            <div className="absolute bottom-[5%] left-0 w-full px-[8%] z-40">
-                 style={{
-                   paddingBottom: 'max(env(safe-area-inset-bottom, 0px), 0px)',
-                   bottom: 'calc(5% + env(safe-area-inset-bottom, 0px))',
-                 }}>
             <div className="w-full flex flex-col items-center justify-center gap-4">
               {/* Mode Toggle Switch */}
               {phoneMode !== "important_message" && phoneMode !== "hand_off" && voiceAssistant.agent && (
@@ -1157,7 +1126,7 @@ export function PhoneSimulator({
                   {phoneMode !== "important_message" && (
                     <button
                       ref={pushToTalkButtonRef}
-                      className={`w-24 h-24 rounded-full backdrop-blur-md transition-all flex flex-col items-center justify-center gap-2 aspect-square select-none ${
+                      className={`w-24 h-24 rounded-full backdrop-blur-md transition-all flex flex-col items-center justify-center gap-2 aspect-square ${
                         interruptRejected
                           ? "bg-red-500/70 text-white"
                           : isPushToTalkActive

src/components/playground/PlaygroundTile.tsx

@@ -45,7 +45,7 @@ export const PlaygroundTile: React.FC<PlaygroundTileProps> = ({
         </div>
       )}
       <div
-        className={`flex flex-col items-center grow w-full relative ${childrenClassName}`}
+        className={`flex flex-col items-center grow w-full ${childrenClassName}`}
         style={{
           height: `calc(100% - ${title ? titleHeight + "px" : "0px"})`,
           padding: `${contentPadding * 4}px`,
@@ -74,7 +74,7 @@ export const PlaygroundTabbedTile: React.FC<PlaygroundTabbedTileProps> = ({
       className={`flex flex-col h-full border rounded-sm border-gray-800 text-gray-500 bg-${backgroundColor} ${className}`}
     >
       <div
-        className="flex items-center justify-start text-xs uppercase border-b border-b-gray-800 tracking-wider relative z-[100] bg-gray-950"
+        className="flex items-center justify-start text-xs uppercase border-b border-b-gray-800 tracking-wider"
         style={{
           height: `${titleHeight}px`,
         }}

src/styles/globals.css

@@ -51,12 +51,3 @@ body {
     opacity: 1;
   }
 }
-
-/* Hide Next.js floating dev indicator */
-nextjs-portal,
-#__next-build-watcher,
-[data-nextjs-dialog],
-[data-nextjs-toast],
-div[style*="position: fixed"][style*="bottom"][style*="right"] {
-  display: none !important;
-}