made msg pop smaller & longer & shadows

src/routes/scene/components/pet-message-pop.svelte

@@ -44,7 +44,7 @@
       clearHideTimer();
       hideTimer = setTimeout(() => {
         dismiss();
-      }, 4000);
+      }, 14000);
     }
   });
 
@@ -54,21 +54,14 @@
 </script>
 
 <div
-  class={`absolute card bottom-9 flex flex-col left-4 z-40 w-52 border border-base-300 bg-base-100 p-2 text-base-content transition-all duration-200 ease-out ${
+  class={`absolute card bottom-9 flex flex-col left-4 z-40 w-max max-w-52 border border-base-300 shadow-lg bg-base-100 px-2 py-1.5 text-base-content transition-all duration-200 ease-out ${
     visible
       ? "pointer-events-auto opacity-100"
       : "pointer-events-none opacity-0"
   }`}
 >
   {#if interaction}
-    <div class="flex items-start justify-between gap-2">
-      <p
-        class="truncate text-[8px] font-semibold uppercase tracking-wide opacity-70"
-      >
-        {interaction.senderName}
-      </p>
-    </div>
-    <p class="line-clamp-3 text-sm leading-snug mt-1 wrap-break-words">
+    <p class="line-clamp-3 text-xs leading-snug wrap-break-words">
       {interaction.content}
     </p>
   {/if}

src/routes/scene/components/pet-message-send.svelte

@@ -98,7 +98,7 @@
 
 <div
   bind:this={rootEl}
-  class={`absolute card bottom-9 flex flex-col left-4 z-40 w-56 border border-base-300 bg-base-100 p-2 text-base-content transition-all duration-200 ease-out ${
+  class={`absolute card bottom-9 flex flex-col left-4 z-40 w-56 border border-base-300 bg-base-100 p-2 shadow-lg text-base-content transition-all duration-200 ease-out ${
     isOpen && $sceneInteractive
       ? "pointer-events-auto opacity-100"
       : "pointer-events-none opacity-0"